How to center div horizontally without display:table?

Up vote 2 down vote favorite share g+ share fb share tw.

It has to work in Firefox 3 and Chrome. I have the following working solution which contain a inside another , so I'm only looking for a solution which doesn't need an inner . Centered divwith left-aligned text FYI The reason why display:table and font-size:140% cannot be combined in the same is that in Chrome it has a bad effect on the line height of the font-size of its container gets changed in JavaScript.

Html css div center horizontal link|improve this question edited Nov 23 '10 at 18:11 asked Nov 23 '10 at 17:59pts6,44211235 78% accept rate.

Ask and you shall receive. – Dave Kiss Nov 23 '10 at 18:03.

Sorry, I forgot to say that the pixel width of the div is not known in advance: it should become as wide as needed. – pts Nov 23 '10 at 18:12.

All you should really need is to set a width on the div and set auto margins. You don't need an outer div; the element will be horizontally centered in whatever block-level element it's contained in, including the body. .

Showtitle { with: 350px; margin-left: auto; margin-right: auto; text-align: left; } Update: It's unclear what you mean by wanting the width of the div to be dynamic and yet be multi-line. At what point will the content wrap, or are you wanting to only do manual line breaks? If you're doing content wrapping, would the div stick to 100% once it has to wrap?

If you don't want the width at 100%, what should its maximum width be set to? You mentioned that you wanted the content left-aligned, yet if it's contained in a centered block that automatically sizes to fit, then you're basically asking for a centered inline element. If you want the content to wrap to multiple lines and be left-aligned, you'll either have to specify a width or be fine with 100% width.

If you're wanting the lines of text to auto-balance and then to have the container resize to fit, I believe you're out of luck as far as what CSS offers.

Sorry, I forgot to say that the pixel width of the div is not known in advance: it should become as wide as needed. – pts Nov 23 '10 at 18:14 Then you can't center it since without specified width they'll be 100% wide - taking up the entire available space, and therefore "centered". You can specify left/right margins/padding to be of a certain thickness if that's what you want.

Instead of auto put particular px, or em. – Mikhail Nov 23 '10 at 18:22.

Centered divwith left-aligned text with . Showtitle { margin: 0 auto; width: ...; } should work fine in Firefox and Chrome.

Sorry, I forgot to say that the pixel width of the div is not known in advance: it should become as wide as needed. – pts Nov 23 '10 at 18:13.

I might be reading this wrong, but you should be able to just apply margin: 0 auto; width:960px; to your showtitle div and be golden.

Sorry, I forgot to say that the pixel width of the div is not known in advance: it should become as wide as needed. – pts Nov 23 '10 at 18:12 In that case, you can try margin-left:50%; but I'm not sure if this will suit your application – Dave Kiss Nov 23 '10 at 18:20.

This doesn't answer my question, because (see in the question) I'm only looking for a solution which doesn't need an inner . – pts Dec 6 '10 at 9:11 @pts, so you accepted "no solution"? Your question seems to explain the problem with nested s as a problem with side-effects of display: table, not with the nested s in general (which you clearly tried and were willing to accept up to that point).

So you have access to the markup, and you've tried nested s. Does my solution work, or does it fail in some way? Edit: Ack, sorry about the formatting.

SO's pseudo-Markdown in comments seems to have some issues. – eyelidlessness Dec 6 '10 at 18:38 Your solution works (i.e. Centers the div) in my Firefox 3.6, but your solution doesn't answer my question, because in my question I was asking for a solution without nested divs. – pts Dec 6 '10 at 23:48 @pts, I understand that, but given that you've tried nested s, isn't it merely an academic restriction rather than a practical one?

The solution works and there isn't an obvious reason why you're adding that restriction. – eyelidlessness Dec 6 '10 at 0:06.

It seems that it's impossible to do the center alignment without display:table or an inner or specifying the width of the .

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.