居中在父div中有兄弟姐妹的子元素

Question

我试图让一个有多个父div的祖父母。一些父div有3个元素而其他只有1个。我需要父div的第2个元素始终在中间对齐（并且还与1元素div类型中的单个元素对齐）。 3元素div类型中的第一个和第三个元素需要触及第二个元素，并且只有在其内容增长时才向边缘移动。我如何用CSS实现这一目标？我在网上找到的大多数解决方案都涉及使用边距或绝对定位，但这会破坏第二个元素与需要触及第二个元素的第一/第三个元素之间的关系。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

请注意，中间的大黄色元素在中间完美居中，左右元素接触中间元素。只有一个元素的div仍然具有一个完美居中的元素。红色是祖父母蓝色是父母黄色是儿童跨度

Answer 1

你可以使用网格将.parent分成3个部分，左边和右边有相同的长度，text-align：右边的左边

.parent {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.left-side {
  text-align: right;
}

.must-be-centered { 
  grid-column-start: 2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 2

您可以使用flexbox水平居中对齐列。每个.child类都将与兄弟元素进行交互，这些元素与display: flex具有直接的父属性

.grandparent {
  background-color: #18bbf0;
  padding: 12px;
  color: #fff;
  font-family: Arial;
  text-align: center;
}
.parent { 
  display: flex; /* control child behavior */
  justify-content: center; /* horizontal centering */
  background-color: #fff;
  padding: 12px;
}
.child {
  background-color: #18bbf0;
  padding: 12px;
}

<div class="grandparent">
  <div class="parent">
    <div class="child">First Text!</div>
    <div class="child">SOME TEXT!</div>
    <div class="child">Other Text!</div>
  </div>
  <div class="parent">
    <div class="child">SOME TEXT!</div>
  </div>
</div>

Answer 3

一些让你入门的东西。

#parent {
  width: 100vw;
  height: 100vh;
}

.row {
  display: flex;
  justify-content: center;
  background: blue;
  height: 200px;
  align-items: center;
}

.row > div {
  background: yellow;
  height: 100px;
  margin: 0 10px;
  border: 1px solid red;
  width: 150px;
}

.row > div:only-child,
.row > div:nth-child(even) {
  flex: 0 0 400px;
}

<div id="parent">
  <div class="row">
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="row">
    <div></div>
  </div>
</div>

Answer 4

使用Bootstrap类它会像这样工作（没有额外的CSS）......

<div class="grandparent min-vh-100 d-flex flex-column align-items-center justify-content-center">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

https://www.codeply.com/go/mOxENzsdjS

Answer 5

Flexbox使这种布局变得非常容易。在.must-be-centered divs上查看flex: 1 0 auto;规则允许它成长的组合，以及max-width来调整你喜欢的大小。

body {
  background: red;
}
.parent {
  background: blue;
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
  padding: 20px;
}
.parent > span {
  background: yellow;
  text-align: center;
  margin: 0 10px;
  padding: 20px;
}
.must-be-centered {
  flex: 1 0 auto;
  max-width: 200px;
}

<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
    <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 6

我只为所有场景编写基本代码片段，我希望它能帮到你。谢谢

.grandparent {
  background-color: red;
  height: 100vh;
  padding: 10px;
}

.parent {
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  min-height: 100px;
}

span {
  background-color: yellow;
  padding: 10px;
}

.must-be-centered {
  margin: 0 10px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="grandparent">
  <div class="parent">
    <span class="left-side">First Text!</span>
    <span class="must-be-centered">SOME TEXT!</span>
    <span class="right-side">Other Text!</span>
  </div>
  <div class="parent">
     <span class="must-be-centered">SOME TEXT!</span>
  </div>
</div>

Answer 7

您可以尝试使用display：flex。尝试在父元素上设置以下内容：

.parent {
  display:flex;
  justify-content:center;
}

Answer 8

这听起来像是在谈论垂直对齐，而不是水平对齐。这可以通过flex轻松完成：

.grandparent{
    display: flex; 
    flex-direction: column;
} 
.parent{
    display: flex;
    justify-content:center;
    align-items:center;
}