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.

css-text-image-vertically-middle-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>
refresh

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.
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments