I'm having trouble finding the right solution for this fully fluid layout. I want the S开发者_运维技巧ub-title in the following fiddles to be vertically center aligned next to the icon. The Sub-title may break onto multiple lines depending on the size of the browser (and varying length of text).
I have two fiddles prepared - the first attempt is my preferred approach as I've more thoroughly tested similar layouts:
http://jsfiddle.net/mmDFC/
The second fiddle, is an attempt on the same situation using display:table-cell;
, but for the life of me I couldn't fix up the lost right text alignment, and I've also never thoroughly tested IE6+ compat with this display type:
http://jsfiddle.net/mmDFC/1/ (this almost works, save the loss of text-align:right;
)
I have looked up a host of similarly titled SO questions but couldn't find what I wanted, so great answer points me to one I've missed, or come up with a solution to the above.
All in the name of vertical aligned text... :/
Browser update: I fiddled in Chrome, I see IE8 behaves similarly, but Ffox3 behaves differently for solution 2.
If I understand what you want right, you just need to add display:table
to the h2
<div class="wrapper clearfix">
<h1>Main Title</h1>
<h2>
<span id="fluid">
Fluid Span
</span>
<span id="icon">
Lots of long text...
</span>
</h2>
</div>
.clearfix:after {
content:"";
display:block;
clear:both;
}
h2 {
float:right;
text-align:right;
background-color:#999;
display:table;
width:43%;
}
span {
background-color:#ccc;
border:1px #000 solid;
vertical-align:middle;
}
span#fluid {
display:table-cell;
height:100%;
}
span#icon {
display:table-cell;
width:60px;
height:40px;
}
http://jsfiddle.net/thomas4g/WecP4/28/
Let me know if this isn't what you want.
精彩评论