垂直對齊中間顯示錶格單元格不在圖像上工作

我正在嘗試在佈局上使用垂直對齊：中間來垂直居中文本，有時是圖像，但它只能處理文本。誰能告訴我爲什麼？垂直對齊中間顯示錶格單元格不在圖像上工作

HTML：

<div> 
    <img src="http://jsfiddle.net/img/logo.png"/> 
</div> 

<div> 
    <span> text </span> 
</div>

CSS：

div{ 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 

    margin:10px; 
} 
img, span{ 
    display:table-cell; 
    vertical-align:middle; 
}

http://jsfiddle.net/9uD8M/我創建了一個小提琴藏漢

來源

2013-12-14 Elaine Marley

爲什麼你需要'顯示：表cell'？ – greenish

將border: 1px solid black放在您的img, span標記上，然後檢查瀏覽器dev中的兩個元素。安慰。您會注意到跨度默認爲其父級的100％高度，而圖像具有定義的高度（實際圖像的高度）。

所以你沒有真正垂直對齊相對於DIV這些元素，你只是垂直對齊span元素相對於跨距:)

內部的文本如果你真的想使用垂直表-centering，這裏是正確的代碼： http://jsfiddle.net/WXLsY/

（vertical-align和display:table-cell去父，你需要對他們的包裝表）

但也有其他方法可以做到這一點（SO有很多的答案，這樣問題，只需使用搜索引擎ch）

來源

2013-12-14 15:50:37

在您的示例中，'img'和'span'子元素不需要'vertical-align：middle'屬性。剩下的CSS就足夠了，解釋很好。 –

正確（它是從OP的代碼中遺留下來的） –

我明白了，井表本身並不是必需的，但我正在使用它們成功地處理文本。我的圖片是響應式的，所以我不知道寬度或高度能夠通過位置居中：絕對例如 –

這是解決問題的一種方式：

HTML：

<div> 
    <span><img src="http://jsfiddle.net/img/logo.png" /></span> 
</div> 
<div> 
    <span> text </span> 
</div>

把你的img置於span，圖像是被替換的元素，它不能包含子內容，因此vertical-align不起作用。

CSS：

div { 
    width:200px; 
    height:200px; 
    background-color:red; 
    display:table; 
    margin:10px; 
} 
span { 
    display:table-cell; 
    vertical-align:middle; 
}

觀看演示的：http://jsfiddle.net/audetwebdesign/Fz6Nj/

有這樣做的幾種方法，你也可以申請display: table-cell父div元素，但是這將是一個不同的方法。

來源

2013-12-14 15:50:08

-2

您可以嘗試添加 - > line-height：200px;在span style部分，我認爲它可能有效;

來源

2013-12-14 15:56:11 dpuertas

爲了垂直對齊表格單元格內的圖像，您需要爲圖像顯示一個塊。

display: block 
margin: 0 auto

margin：0 auto是將圖像與中心對齊。如果你想讓圖像左對齊，那麼不要包含這個。如果你想對齊您可以添加圖像右：

float: right

感謝，摹

來源

2017-01-16 08:44:28

垂直對齊中間顯示錶格單元格不在圖像上工作

回答

相關問題