Question

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

Answer 1

#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.