CSS – how to align image and text in center vertically

We frequently need to center text and images when we are writing HTML/CSS. This can be done by using vertical-align:middle property on the child element which needs to be centrally aligned.

Example

<style type="text/css">
.container {border: 1px solid lightgray;}
.center {vertical-align:middle;display:inline-block;}
</style>
<div class=container>
Hello
<img class="center" src="/img/elephant1.jpg">
<div class="center">Hello2</div>
</div>

Few points to note about vertical-align

1. The elements to be aligned should be either display:inline or display:inline-block
2. We need to apply vertical-align:middle to elements inside a container. These elements then align in middle of their container.