开发者

CSS text-align on inline-block element

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; }
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜