CSS text-align on inline-block element

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

Divs always stretch to accomodate their content, to the extent of their direct parent. No need for the `display:inline-block;` — Krimo, May 20 '11 at 10:26
father div is larger and its width is fixed so divToCenter tend to expand to its father's width — luca, May 20 '11 at 10:28

score 3 · Accepted Answer · edited Jul 01 '18 at 21:20

3

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

edited Jul 01 '18 at 21:20

jak.b

273
4
15

answered May 20 '11 at 10:31

clairesuzy

27,296
8
54
52

yeap thanks!I also kept the "wrap-left-aligned-content" solution as last resource..I thought should be a css selector to use my own structure without further modification but I guess I was wrong =) – luca May 20 '11 at 10:41
I see the fiddle example you've now left in a comment on another answer and yes I think wrapping the left aligned would be the best answer - http://jsfiddle.net/clairesuzy/ea47e/6/ - you can't target the "text node" part of the father div any other way – clairesuzy May 20 '11 at 11:08

Jawad · Answer 2 · 2011-05-20T10:14:33.467

2

div.divToCenter
{
margin: 0 auto;
}

edited May 20 '11 at 10:14

answered May 20 '11 at 10:07

Jawad

8,352
10
40
45

you need text inside the div to be centered like text align or you want the div itself to be centered? They are 2 different things! – Jawad May 20 '11 at 10:10
I want the div centered..(btw the div is the actual size of its content..so content cant be aligned) – luca May 20 '11 at 10:14
@JAA149 I also tried your tip before but it's not working..I added "!important" to make sure overriding is not happening ..If I apply the "text-align" property to father div I have all the text (including divToCenter) centered.. but I just want the div on center – luca May 20 '11 at 10:20
to use margin:0 auto you will also need to define a width of the div. – Tristar Web Design May 20 '11 at 10:34

Mousa · Answer 3 · 2011-05-20T10:38:21.350

1

.father { text-align: center; }
.father div.divToCenter { margin: 0 auto; }

Update:

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

edited May 20 '11 at 10:38

answered May 20 '11 at 10:22

Mousa

2,926
1
27
35

as I wrote above If I apply the "text-align" property to father div I have all the text (including divToCenter) centered.. but I just want the div on center.. – luca May 20 '11 at 10:24
I've updated my post, hoping to achieve your requirements, just set the width property of the inner div to make sure that auto margin is activated. – Mousa May 20 '11 at 10:39
divToCenter width is dynamic..not fixed..thanks! I guess I'll use the "wrap left content" solution – luca May 20 '11 at 10:49

CSS text-align on inline-block element

3 Answers3