我有一种情况,我需要垂直对齐div内的文本:
固定宽度 多行文字 应用浮动这是一个使用display的例子:table-cell; 这是行不通的,因为没有浮动,我需要:
CSS: .noFloat { width:200px; height:200px; border:1px solid black; vertical-align:middle; display:table-cell; } HTML: <div class="noFloat"> Here is some content for my div. Here is some more content for my div. </div>以下是使用line-height的示例:; 这将无法正常工作,因为有多行文字最终成了一团糟:
CSS: .lineHeight { width:200px; height:200px; line-height: 200px; border:1px solid black; } HTML: <div class="lineHeight"> Here is some content for my div. Here is some more content for my div. </div>这是一个使用display的例子:table-cell; 浮动因浮动而无法工作,它会对齐顶部的所有内容:
CSS: .withFloat { width:200px; height:200px; border:1px solid black; vertical-align:middle; display:table-cell; float: left; } HTML: <div class="withFloat"> Here is some content for my div. Here is some more content for my div. </div>以下是3个例子: http : //jsfiddle.net/BJGh5/3/
I have a situation where I need to vertically align text inside a div that has:
A fixed width Multiple lines of text A float appliedHere is an example of using display:table-cell; which won't work because there is no float, which I need:
CSS: .noFloat { width:200px; height:200px; border:1px solid black; vertical-align:middle; display:table-cell; } HTML: <div class="noFloat"> Here is some content for my div. Here is some more content for my div. </div>Here is an example of using line-height:; which won't work because there are multiple lines of text which ends up being a mess:
CSS: .lineHeight { width:200px; height:200px; line-height: 200px; border:1px solid black; } HTML: <div class="lineHeight"> Here is some content for my div. Here is some more content for my div. </div>Here is an example of using display:table-cell; with a float which won't work because of the float, which aligns everything at the top:
CSS: .withFloat { width:200px; height:200px; border:1px solid black; vertical-align:middle; display:table-cell; float: left; } HTML: <div class="withFloat"> Here is some content for my div. Here is some more content for my div. </div>Here are all 3 examples: http://jsfiddle.net/BJGh5/3/
最满意答案
如果我理解正确,你需要设置一个容器div。 一个垂直对齐,一个浮动。
If I understand you correctly, you will need to set a container div. One to vertically align and one to float.
更多推荐
div,CSS,display,table-cell,width,电脑培训,计算机培训,IT培训"/> <meta name=&q
发布评论