I have this structure:
<div class="father">
This string is left-aligned
<div class="divToCenter" style="display:inline-block;">
//contains other divs.I used inline block for making this div as large as
//content ATTENTION: its width is not fixed!
</div>
<开发者_如何转开发;/div>
How could I say :
Let me have ONLY the class named "divToCenter" centered in "father" div.
Thanks
Luca
#left {
float: left;
background: #eee;
width: 200px; /* width is optional */
}
#content {
overflow: hidden;
text-align: center;
}
<div class="father">
<div id="left">This string is left-aligned</div>
<div id="content">
<!-- contains other divs.I used inline block for making this div as large as content -->
</div>
</div>
Float the left aligned string or block to the left, then with overflow:hidden
on the content it will automatically take up the remaining space and you can text-align
it how you want.
Either that or convert the left content to an inline block too so it and content are side by side and you will be able to text-align
each inline-block
separately.
div.divToCenter
{
margin: 0 auto;
}
.father { text-align: center; }
.father div.divToCenter { margin: 0 auto; }
Update:
.father { text-align: left; }
.father div.divToCenter { width:Xpx; margin: 0 auto; }
精彩评论