Вертикально выравнивание диапазона тега в ар теге

Question

У меня есть этот HTML структуру:

<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> 

Я хочу, чтобы центрировать изображение в середине страницы и текст справа или слева от изображения, но он должен вертикально выравниваться по середине.

Answer 1

пожалуйста, попробуйте следующее

.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>