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

主要目標是執行以下操作： 示例

因此，假裝圖片是准確的，並且.container （灰色框）具有相同的大小（如CSS中所示）

我的問題是vertical-align不起作用。我研究了沒有display: table-cell CodePen代碼 display: table-cell在StackOverflow中發現了display: table-cell和其他與表格顯示相關的解決方案。 為什么它不能與我的HTML和CSS代碼一起使用？ 我將所有<h2>對齊在中間：\\

Answer 1

在Codepen示例中，實際上h2在框中不是垂直對齊的。 這是元素彼此相鄰的對齊，而不是容器中的元素 。 這有點令人困惑。 擁有一個內聯元素將不起作用，但是如果您擁有兩個內聯元素，您會看到它們彼此垂直對齊。 但是，使用表格單元時，此功能會更改。

嘗試從Codepen示例中刪除圖像，然后在div上放置一個高度。 您會看到它不再垂直對齊。

我將與display:table和display:table-cell對齊。 它可以使用position:absolute方法工作，但是如果文本開箱即用，則由於文本不再存在於文檔流中，您將遇到布局問題。 通過將它們設置為表，您可以保留一些靈活性。

Answer 2

一種解決方案是使用absolute定位。

.container {
  position: relative;
}

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

要設置不同類的樣式，只需在h2之后更改.middle類，並根據需要應用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 3

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

首先， div的高度非常小，並且h2具有默認margin 。 根據我的vertical align bottom的最佳方法是make

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

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