Question

我有一个带三个孩子的内在div；一个按钮，一些文本和一个按钮组。

我正在使用flex来使所有内容居中，但是问题是文本实际上并未相对于包含元素居中。而是将文本居中在按钮和按钮组的近边界之间。

文本不在黄色框中居中。我希望文本在黄色框中居中。

有没有办法说“从外部元素的边缘测量而忽略兄弟姐妹的内部边缘”？

.outer-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-box {
  width: 500px;
  height: 60px;
  background-color: yellow;
  display: flex;
  justify-content: space-between;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  </br>
  <div class="outer-box">
    <div class="inner-box">
      <button class="btn">My Button</button>
      
      <span>My text here</span>
      
      <div class="btn-group">
        <button class="btn">My Button1</button>
        <button class="btn">My Button2</button>
      </div>
    </div>  
  </div>
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

Flex基本上将.inner-box的子级视为列。

如果您希望文本居中放置到黄色框 ，则可以absolute将文本relative定位到黄色框，如下所示：

.outer-box {
  width: 100%;
  display: flex;
  justify-content: center;
}

.inner-box {
  width: 500px;
  height: 60px;
  background-color: yellow;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  </br>
  <div class="outer-box">
    <div class="inner-box">
      <button class="btn">My Button</button>
      
      <span class="text">My text here</span>
      
      <div class="btn-group">
        <button class="btn">My Button1</button>
        <button class="btn">My Button2</button>
      </div>
    </div>  
  </div>
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Answer 2

如果您想使文本在span元素内居中，则可以直接更改该元素的对齐方式。

    .inner-box span {
    align-self: center; 
}

在CSS中，无论其他同级元素如何，如何将元素相对于包含元素居中？

2 个答案: