HTML Vertically居中h1 [英] HTML Vertically Center h1

问题描述

我有一个包含两个内联div的html:

I have this html that contains two inline divs:

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垂直居中.应该是这样的东西

The image and the h1 are shown correctly side by side. Now i would like the h1 to be vertically centered. It should be somthing like this

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

我该怎么做?

推荐答案

您可以使用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/

这篇关于HTML Vertically居中h1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！