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

【问题标题】：Centering child element that has siblings in parent div居中在父 div 中有兄弟姐妹的子元素
【发布时间】：2019-03-27 18:43:24
【问题描述】：

我正在尝试拥有一个具有多个父 div 的祖父母。一些父 div 有 3 个元素，而其他只有 1 个。我需要父 div 的第二个元素始终在中间对齐（并且还与 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 仍然有一个元素完美居中。红色是祖父母蓝色是父母黄色是子跨度

【问题讨论】：

我不完全明白你的意思；你能分享一张你期望的照片吗？
这与 Bootstrap 有什么关系？您似乎没有使用任何 Bootstrap 类。垂直居中还是水平居中？
@Zim 我包含了引导程序，因为如果有使用引导程序的解决方案，我将能够使用它。
@IvanS95图片上传完毕
是否有其他 CSS 设置框的宽度和高度？

标签： html css bootstrap-4 css-grid

【解决方案1】：

你可以使用 grid 将 .parent 分成 3 个部分，left 和 right 长度相等， text-align: right on left

.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>

【讨论】：

这个解决方案是为我完成工作的最简单的解决方案。谢谢！

【解决方案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>

【讨论】：

这是一个不错的答案，只是它假设 3 个子 div 将占据 100% 的宽度，这对我来说不是这样
我的答案是在图形添加到问题之前提交的。我将删除 100% 的总值。

【解决方案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>

【讨论】：

这是一个很好的解决方案，除了我不知道我的跨度会有多宽（我之前应该提到过）所以我不能将像素值硬编码到 flex
你可以使用任何单位，或者这里也可能有一个网格解决方案。

【解决方案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

【讨论】：

此解决方案将我不想要的跨度垂直居中，也无法对齐我需要的“必须居中”的跨度。然而，我觉得我只是看看你选择使用的类就学到了很多关于引导程序的知识。
请发布您的代码的真实示例。很难理解你已经拥有的东西.. 在发布的图片中，所有东西看起来都垂直居中

【解决方案5】：

Flexbox 让这种布局变得非常简单。在.must-be-centered div 上查看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>

【讨论】：

这是一个很好的答案。唯一的问题是它使用硬编码的边距/填充来推动“第一个文本！”和“其他文本”到“某些文本！”旁边的中间。当实际上我的父 div 比子跨度宽得多时，所以当我尝试这个时，外部跨度滑到父容器的边缘

【解决方案6】：

我只是为您的所有场景编写基本代码sn-p，希望对您有所帮助。谢谢

.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>

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

听起来你说的是垂直对齐，而不是水平对齐。使用 flex 很容易做到这一点：

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

【讨论】：