线旁的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破文本，垂直

回答

相关问题