HTML 垂直居中 h1答案

【问题标题】：HTML Vertically Center h1HTML 垂直居中 h1
【发布时间】：2021-09-14 23:34:23
【问题描述】：

我有这个包含两个内联 div 的 html：

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

我该怎么做？

【问题讨论】：

注意：<img> 不使用或不需要结束斜线。

标签： html css inline

【解决方案1】：

你可以使用弹性

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

【讨论】：

考虑到只是将vertical-align:middle; 添加到父 div 会做同样的事情。

【解决方案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>

【讨论】：

【解决方案3】：

只需将vertical-align: middle; 添加到您的班级（当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>

【讨论】：

反对票是为了什么？我 100% 回答了这个问题——你看过 sn-p 吗？

【解决方案4】：

在您的第二个 div 上应用此样式：

div.inline{
    vertical-align: middle;
}

【讨论】：

webkit 浏览器多年来不需要前缀。
谢谢 Rob 其实我不知道，我纠正了我的错误。

【解决方案5】：

使用引导程序的答案：

使用 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>

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

在css中使用内联高度属性

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

【讨论】：