垂直對齊的AP標記span標記

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>