0

I have this html structure:

<div style="text-align: center; margin-top: 100px;width:100%;vertical-align:center">
  <p>
    <span id="spn">Some dummy text</span>
    <span><img class="size-full wp-image-647 aligncenter" src="http://image.png" alt="website_repairman" width="300" height="325" /></span>
  </p>
</div>

I Want to centre the image in the middle of the page and the text to the right or left of the image but it should vertically align in the middle.

Pete
  • 57,112
  • 28
  • 117
  • 166
DevMan
  • 538
  • 1
  • 5
  • 25

1 Answers1

0

please try following 

.main-div{
  display: table;
}
#spn{
  display: table-cell;
  vertical-align: middle;
}

 <div style="text-align: center; margin-top: 100px;width:100%;vertical-align:center">
  <p class="main-div">
    <span id="spn">Some dummy text</span>
    <span><img class="size-full wp-image-647 aligncenter" src="http://dummyimage.com/300x350/red/fff" alt="website_repairman" width="300" height="325" /></span>
  </p>
</div>
Abrar Pathan
  • 66
  • 2