时间戳

首页 > 解决方案 > 将文本放在 div 的中心，同时忽略其中的其他元素

html - 将文本放在 div 的中心，同时忽略其中的其他元素

问题描述

有一个大 div，其中包含两个位于末尾的按钮。

<big-div>            <small-div>my text</small-div>      <button1><button2></big-div>

我希望里面的文本small-div相对于big-div忽略按钮居中。现在它不在中间，但由于按钮的缘故，它离左侧更近了一点。

CSS 文件：

.big-div {
    display: flex;
}

.button1 {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}
.button2 {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}

.small-div {
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0d1e2c;
    margin: 10px 0;
}

关于在定位文本时如何“忽略”按钮的任何建议？

.big-div {
display: flex;
background-color: red;
width:100%;
height: 100px;
}

.small-div {
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.02em;
    text-align: center;
    color: #0d1e2c;
    margin: 10px 0;
}

.buttons {
    float: right;
    margin-right: 0;
    margin-left: .25em;
}
<div class="big-div">
 <div class="small-div">my text</div>
 <button class="buttons">button1</button>
 <button class="buttons">button2</button> 
</div>

标签： htmlcss

解决方案

您可以添加position: absolute; left: 50%; transform: translateX(-50%);到.small-div和justify-content: flex-end;：.big-div

.big-div {
  display: flex;
  justify-content: flex-end; 
}

.button1 {
  margin-left: .25em;
}

.button2 {
  margin-left: .25em;
}

.small-div {
  font-weight: 600;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #0d1e2c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
<div class="big-div">
  <div class="small-div">
    small div is here
  </div>
  <button class="button1">button1</button>
  <button class="button2">button2</button>
</div>

推荐阅读