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.



<style type="text/css">
.container {border: 1px solid lightgray;}
.center {vertical-align:middle;display:inline-block;}
<div class=container>
<img class="center" src="/img/elephant1.jpg">
<div class="center">Hello2</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.
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments