This string is left-aligned

CSS alignment of text on an 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 can I say:

Let me have ONLY a class named "divToCenter" centered in the father div.

thanks

Luca

+6
source share
3 answers
 #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> 

put the left aligned line or block to the left, and then overflow:hidden in the content will automatically occupy the remaining space, and you can text-align it text-align you want

either this, or convert the left content into an inline block so that it and the content are next to each other, and you can align the inline-block text separately

+3
source
 div.divToCenter { margin: 0 auto; } 
+2
source
 .father { text-align: center; } .father div.divToCenter { margin: 0 auto; } 

Update:

 .father { text-align: left; } .father div.divToCenter { width:Xpx; margin: 0 auto; } 
+1
source

Source: https://habr.com/ru/post/888627/


All Articles