HTML 垂直居中 h1

Question

我有这个 html，其中包含两个内联 div：

HTML

div.inline {
  display: inline-block;
}

<div class="inline">
  <img src="http://via.placeholder.com/350x150" />
</div>

<div class="inline">
  <h1 class="title"> TOPIC </h1>
</div>

图像和 h1 正确并排显示。现在我希望 h1 垂直居中。应该是这样的

+----------+
|          |
|   IMG    |    TOPIC 
|          |
+----------+

我该怎么做？

Answer 1

只需将 vertical-align: middle; 添加到您的 class（当 display 为 inline-block 时有效）：

div.inline {
        display: inline-block;
        vertical-align: middle;
}

<div class="inline">
    <img src="http://placehold.it/120x120/fe2" />
</div>

<div class="inline">
    <h1 class="title"> TOPIC </h1>
</div>

Answer 2

只需使用 vertical-align:middle，因为它会水平对齐您的元素。

div.inline {
        display: inline-block;
        vertical-align:middle;
}

<div class="inline">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwswZVnaDs2Sn9AyTVbEhdfGc3cCr3tbh_tiytTGd_cJf1d8_a" />
</div>

<div class="inline">
    <h1 class="title"> TOPIC </h1>
</div>

Answer 3

你可以使用 flex

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
    <div class="inline">
  <img src="http://via.placeholder.com/350x150" />
    </div>

 <div class="inline">
  <h1 class="title"> TOPIC </h1>
 </div>
</div>

供参考：https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 4

第二次 div 应用此样式：

div.inline{
    vertical-align: middle;
}

Answer 5

在 css

中使用了行内高度属性

inline-height:500px; // height of parents div

Answer 6

答案使用 bootstrap:

用 d-flex、h-100、justify-content-center、align-items-center

将 h1 包裹在 div 中

示例：

<div class="d-flex h-100 justify-content-center align-items-center>
  <h1>heading</h1>
</div>

Answer 7

您可以使用以下代码轻松完成此操作。

HTML代码

<div class="divBlock">
    <h4 class="hText">H1 Text</h4>
</div>

CSS代码

.divBlock {
    display: flex;
}
.hText {
    margin-top: auto;
    margin-bottom: auto;
    vertical-align: middle;
}

HTML 垂直居中 h1

HTML Vertically Center h1

html

css

inline