Question

我无法将行内块div（其中包含多个相等的div）对齐到中心，而是将其自身定位在底部

浮动，垂直垂线

.oneline {
  width: 220px;
  height: 144px;
  border: solid 2px #ccc;
  display: inline-block;
  margin-right: 50px;
  margin-bottom: px;
}

<div style="float: right; margin-right:140px;">
  <div class="oneline">
    <img src="gold.png" align="left">
    <pre>IV-III 12€
    III-II 12€
    II-I 12€
    I-SERIES 15€
    PLAT SERIES 9€
    PL WIN 5€
    </pre>
  </div>
  <p>2 MORE SAME DIVS</p>
  <hr>
  <p>3 MORE SAME DIVS</p>
</div>
</div>

Answer 1

我在最外面的div中添加了一个类.wrapper，并将您的内联样式移到了CSS上。添加了红色边框，因此您可以看得更好...

Flexbox布局使内容的行或列居中非常容易。 display: flex属性使它成为flexbox容器，并将所有直接子元素变为flex项目。 flex-direction使其成为一列，默认为行方向，align-items现在控制水平对齐方式（在行方向它控制垂直对齐方式）。

display: flex;
flex-direction: column;
align-items: center;

有些事情会改变。例如，<hr>元素现在折叠了，所以我给它：

hr {
  width: 100%;
}

.wrapper {
  /* FLEXBOX */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* so you can see better, remove this */
  border: 1px solid red;

  float: right;
  margin-right:140px;
}
.oneline {
  width: 220px;
  height: 144px;
  border: solid 2px #ccc;
  display: inline-block;
}
hr {
  width: 100%;
}

<div class="wrapper">
  <div class="oneline">
    <img src="gold.png" align="left">
    <pre>IV-III 12€
    III-II 12€
    II-I 12€
    I-SERIES 15€
    PLAT SERIES 9€
    PL WIN 5€
    </pre>
  </div>
  <p>2 MORE SAME DIVS</p>
  <hr>
  <p>3 MORE SAME DIVS</p>
</div>

无法对齐div

1 个答案: