在 CSS 中，如何使一个元素相对于包含元素居中，而不考虑其他同级元素？

Question

我有一个内部 div 和三个 children；一个按钮，一些文本和一个按钮组。

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

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

有什么办法可以说 "measure from the edges of the outer element and ignore the inner edges of siblings"?

.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 中，如何使一个元素相对于包含元素居中，而不考虑其他同级元素？

In CSS, how can I center an element with respect to the containing element, regardless of other sibling elements?

html

css

centering

flexbox