HTML Vertically Center h1

问题

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>

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

How do i do this?

回答1:

you can use 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>

for reference: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

回答2:

Simply use vertical-align:middle as it will align your elements horizontally.

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:

Just add vertical-align: middle; to your class (works when display is 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>

回答4:

On your second div apply this style:

div.inline{
    vertical-align: middle;
}

回答5:

An answer using bootstrap:

Wrap the h1 in a div with d-flex, h-100, justify-content-center, align-items-center

Example:

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

回答6:

Used inline height property in css

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

来源：https://stackoverflow.com/questions/47832208/html-vertically-center-h1

标签

html

css

inline