Vertically Center Align Text Right of an Image
Vertically center align text to the right of an image. The first two methods work well. Text will wrap and stay centered on the image as it wraps.
Method 1
CSS
#container1 {
display:flex;
}
#container1 * {
margin:auto 0;
}
HTML
<div id="container1">
<img src="https://via.placeholder.com/150"><p>Text is vertically centered on the image.</p>
</div>
This method sets the container1 to display flex, and everything in the container to have auto for vertical margin, and 0 (can set this to anything) set for left and right margins. Text wraps centered on the image.
Example 1
Text is vertically centered on the image.
Method 2
CSS
#container2 {
display:flex;
align-items:center;
}
HTML
<div id="container2">
<img src="https://via.placeholder.com/150"><p>Text goes here.</p>
</div>
Example 2
This method also uses flex for the container, then uses align-items: center to vertically align the contents of the container. Text wraps centered on the image.
Method 3
The next three methods work well for short sections of text. However, for the next three methods, if the text needs to wrap it will wrap under the image.
CSS
#img {
vertical-align:middle;
}
HTML
<div>
<img id="img" src="https://via.placeholder.com/150"><span>Text is vertically centered on the image.</span>
</div>
This method simply sets the image property to vertical-align:middle. The other requirement is to use an inline element following the image such as span, or set a block element to display:inline. This method is good for short text. Text will wrap under the image if wider than the screen width.
Example 3
Method 4
CSS
#container4 {
display:table-cell;
}
HTML
<div id="container4"> <img id="img" src="https://via.placeholder.com/150"><span>Text is vertically centered on the image.</span></div>
This method takes advantage of the table cell property which by default displays items in the vertical center of the cell. Again, you have to use an inline element such as span to display the text. Text wraps under the image.
Example 4
Method 5
CSS
#txt {
line-height:150px;
display:inline-block;
}
HTML
<img id="img" src="https://via.placeholder.com/150"><p id="txt">Text is vertically centered on the image.</p>
This method doesn't require a container. Just set the text container to display inline-block, and set the text line-height equal to the image height. Text wraps under the image.
Example 5
Text is vertically centered on the image.