在父div中具有同级的子元素居中

Question

我正在尝试有一个具有多个父div的祖父母。一些父div包含3个元素，而另一些仅具有1。我需要父div的2nd元素始终在中间对齐（并且还要与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个部分，左右两边的长度相等，并且文本对齐：右边在左侧

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

; Start the ENVI application
e = ENVI()

; List all .til files in the subdirectories for the given scene 
satFiles = FILE_SEARCH('2_Gain_Offset/' + FILE_BASENAME(zipFile, '.zip'), '*M1BS*' + '*.TIL')
satScenes = List()

; Loop through each .til file and add each file to satScenes
FOR j = 0, N_ELEMENTS(satFiles) - 1 DO BEGIN
  raster = e.OpenRaster(satFiles[j], DATA_IGNORE_VALUE = -9999)
  satScenes.Add, raster
ENDFOR

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

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

Answer 6

我只是为您的所有情况编写基本的代码段，希望对您有所帮助。谢谢

Set

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

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;
}