HTML + CSS定心用豎排文字圖片旁邊的

大家好和TKS在您的幫助......我尋找最好的做法來解決一個簡單的問題：HTML + CSS定心用豎排文字圖片旁邊的

.left { 
 
    float: left; 
 
    width: 79%; 
 
    margin-right: 1%; 
 
} 
 
.left img { 
 
    float: right; 
 
} 
 
.right { 
 
    float: right; 
 
    width: 20%; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

我應該如何將文字垂直放置在圖像的中間（顯然，由於圖像的寬度/高度是動態的，因此不在邊距或底部使用px）。謝謝！

來源

2016-10-01 Fryla- Cristian Marucci

我會嘗試這樣的事情[FIDDLE]（https://jsfiddle.net/Lf2fk8cc/2/ ） – Abhi

[垂直對齊圖像旁邊的文本？]（http://stackoverflow.com/questions/489340/v在文本的下一個圖像上） – Rob

而不是「居中垂直文本」我認爲你的意思是「垂直居中文本」。否則，它聽起來像是垂直的*文本*，而不是它被居中的軸。 –

您可以使用flexbox。見例如：

.main{ 
    display: flex; 
    align-items: center; 
}

https://jsfiddle.net/zb2ozq1k/1/

來源

2016-10-01 14:37:30 marcelo2605

你的小提琴缺少CSS。不知道這是否是故意的。 –

@ J-Bar我更新了。謝謝。 – marcelo2605

很好的答案。但它不會與ie9我認爲 –

我擺脫float和使用table-cell！而非。然後，使用vertical-align:middle作爲文本。

像這樣：

.main{ 
 
    display: inline-table; 
 
    border: 1px solid blue; 
 
} 
 

 
.left { 
 
    width: 79%; 
 
    margin-right: 1%; 
 
    display: table-cell; 
 
    border: 1px solid green; 
 
} 
 

 
.right { 
 
    width: 20%; 
 
    border: 1px solid red; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<div class="main"> 
 
    <div class="left"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    </div> 
 
    <div class="right">A TEXT</div> 
 
</div>

來源

2016-10-01 14:45:04 ochi

h1 { 
    display: inline; 
    vertical-align:top; 
}

<div class="middle"> 
    <img src="http://placekitten.com/200/150" > 
    <h1>A TEXT</h1> 
</div>

來源

2016-10-01 17:50:44

HTML + CSS定心用豎排文字圖片旁邊的

回答

相關問題