線旁的img破文本，垂直

<img style="float: left;" width=200 height=200 src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTQOrSSvhefLVAXo3OOoMGYGS232bfHFnZyA9Jk24KeefYuau8c"> 
    <div id="t">text next to it which will be line broken!</div> 

#t 
{ 
    float: left; 
    line-height: 200px; 
    background-color: red; 
}

http://jsfiddle.net/s4wMF/線旁的img破文本，垂直

嗯......爲中心，你可以看到，縮小寬度將導致文本去下劃線。我想實現這樣的事情：

fax?

來源

2014-03-04 John Smith

爲什麼要給行高？ –

@Echo我想要垂直對齊他的文本在div – SaturnsEye

如果我不會給行高，它不居中然後 –

如果您希望將文本垂直對齊到div的中心，那麼在這裏使用table-cell方法而不是line-height會是一個好主意。

<div id="t"><p>text next to it which will be line broken!<p></div>

嘗試這樣的事情

#t 
{ 
    float: left; 
    background-color: red; 
    width:100px; 
    height:200px; 
    display: table; 
} 

#t p { 
    display:table-cell; 
    vertical-align: middle 
}

來源

2014-03-04 16:13:52 Rory

幾乎OK。但是如果P必須是H1呢？ –

使用h1標記代替p，並用#t h1替換#t p在css中 – Rory

擺脫線的高度。這將導致它如你所描述的那樣環繞。

嘗試

img { display: block; } 
#t { vertical-align: middle; }

還有其他選項vertical-align所以用最適合你的工作之一。

來源

2014-03-04 16:10:38 beautifulcoder

它不會導致安排div中間 –

線旁的img破文本，垂直

回答

相關問題