Center variable-width floated element

Question

The element has a variable width, so I don't know it.

Is it possible to center this element inside its wrapper element?

The wrapper has a fixed width of 960px...

Close enough: http://stackoverflow.com/a/9019019/405015 – thirtydot Feb 06 '12 at 02:32 — thirtydot, Feb 06 '12 at 02:32

Max · Accepted Answer · 2014-02-05T16:15:44.107

5

Add text-align: center; to the wrapper, and then display: inline-block; to the child

Or add display: table; andmargin: 10px auto; to the child element

Or position: relative; left: 50%; float: left;

edited Feb 05 '14 at 16:15

answered Feb 06 '12 at 02:17

Max

Alex · Answer 2 · 2012-02-06T02:32:25.570

2

Yes, as long as you have margin:0 auto; with the variable width specified...

edited Feb 06 '12 at 02:32

answered Feb 06 '12 at 02:07

Alex

thats the problem, i can specify the width because depends on the text inside the element.. – Alex Feb 06 '12 at 02:09
you could write some `JS` that, on page load, retrieves the `outer width` and sets the `CSS` style property to the `outer width` detected in the script – Alex Feb 06 '12 at 02:12
1

depends on the element containing the text but using `
` or `
` will work with this solution without additional js, [here](http://jsfiddle.net/qGKDb/1/) is an example where the width is randomly set
– T I Feb 06 '12 at 02:27

stewe · Answer 3 · 2012-02-06T03:01:22.440

1

edited Feb 06 '12 at 03:01

answered Feb 06 '12 at 02:19

stewe

3 Answers3