在 div 中垂直对齐 h2

Question

好的，我得到了以下HTML结构

<div class="category">
    <div class="container bottom">
        <h2>Name1</h2>
    </div>
    <div class="container top">
        <h2>Name2</h2>
    </div>
    <div class="container ">
        <h2>Name3</h2>
    </div>
    <div class="container">
        <h2>Name4</h2>
    </div>
    <div class="container">
        <h2>Name5</h2>
    </div>
    <div class="container">
        <h2>Name6</h2>
    </div>
    <div class="container">
        <h2>Name7</h2>
    </div>
</div>

CSS是这样的：

* {
    margin: 0;
    padding: 0;
}

.category {
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.container {
    display: inline-block;
    width: 33%;
    height: 4em;
}

h2 {
    display: inline-block;
    width: 100%;
}

.left > * {
    text-align: left;
}

.right > *{
    text-align: right;
}

.top > * {
    vertical-align: top;
}

.bottom > * {
    vertical-align: bottom;
}

主要目标是做这样的事情： Example

为了它，假设图片是准确的并且 .container（灰色框）具有相同的大小（如您在 CSS 中看到的那样）

我的问题是 vertical-align 不工作..我已经研究了这个 CodePen Code 在没有 display: table-cell 和其他 table-display-related 解决方案的情况下工作我在 Whosebug 上发现了。为什么它不适用于我的 HTML 和 CSS 代码？我将所有 <h2> 对齐在中间：\

Answer 1

一个解决方案是使用 absolute 定位。

.container {
  position: relative;
}

.container h2.middle {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

要为不同的 class 设置样式，只需更改 h2 之后的 .middle class 并根据需要应用 left right top bottom 值。像这样：

.container h2.top {
  position: absolute;
  top: 0;
}

.container h2.bottom {
  position: absolute;
  bottom: 0;
}

.container h2.right {
  position: absolute;
  right: 0;
}

.container h2.left {
  position: absolute;
  left: 0;
}

在你的html中：

<div class="container">
    <h2 class="top">Name1</h2>
</div>
<div class="container">
    <h2 class="bottom">Name2</h2>
</div>
<div class="container ">
    <h2 class="left">Name3</h2>
</div>
<div class="container">
    <h2 class="right">Name4</h2>
</div>

Answer 2

<h2> 对齐是由于其默认 margin。尝试使用 translateY.

定位 h2

.category {
text-align: center;
width: 95%;
margin: 0 auto;
}

.container {
border: 1px solid red;
display: inline-block;
width: 32%;
height: 4em;
}

.left {
text-align: left;
}

.right {
text-align: right;
}

.top h2{
  transform: translateY(0);
}

.bottom h2 {
  transform: translateY(100%);
}
h2{
margin: 0;
display: inline-block;
transform: translateY(50%);
}

<div class="category">
<div class="container bottom">
    <h2>Name1</h2>
</div>
<div class="container top">
    <h2>Name2</h2>
</div>
<div class="container left">
    <h2>Name3</h2>
</div>
<div class="container bottom">
    <h2>Name4</h2>
</div>
<div class="container right">
    <h2>Name5</h2>
</div>
<div class="container bottom right">
    <h2>Name6</h2>
</div>
<div class="container">
    <h2>Name7</h2>
</div>
</div>

Answer 3

首先 div 的高度非常小，h2 有默认值 margin。根据我的说法，vertical align bottom 的最佳方法是 make

.container{ 
   position: relative;
}
.bottom { 
    position: absolute; 
    bottom: 0px;
 }

<div class="container">
   <h2 class="bottom">Name1</h2>
</div>

Answer 4

在 Codepen 示例中，h2 实际上并不是在框中垂直对齐。 这是相邻元素的对齐方式，而不是容器中元素的对齐方式。这有点令人困惑。拥有一个行内元素是行不通的，但如果你有两个，你会看到它们彼此垂直对齐。但是，当使用 table 单元格时，此功能会发生变化。

尝试从 Codepen 示例中删除图像，然后在 div 上放置一个高度。您会看到它不再垂直对齐。

我会赞同 display:table 和 display:table-cell。它将使用 position:absolute 方法工作，但如果文本扩展到框外，您将遇到布局问题，因为文本不再在文档流中。通过将它们设置为 tables，您可以保持一些灵活性。

在 div 中垂直对齐 h2

Vertical align h2 in div

html

css

vertical-alignment