How to horizontally center a floating element of a variable width?

Asked 5/8, 2009 at 9:22 Answered 8/11, 2020 at 0:7

css css-float positioning centering variable-width

Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.

Umbilical answered 5/8, 2009 at 9:22 Comment(3)

If you're going to center it, why is it floated? – Abhenry 5/8, 2009 at 9:31

it's a long story, I'm floating it for other reasons – Umbilical 5/8, 2009 at 9:44

possible duplicate of How to center float elements? – Christology 21/6, 2013 at 10:5

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS:

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that.

Lynn answered 5/8, 2009 at 10:6 Comment(5)

You can also try margin-left instead of left and position: relative. Margin-left worked for me on the -50% element. – Chancellorsville 1/12, 2011 at 0:13

yea - but what is the added value @muhd? – Bermuda 27/12, 2011 at 22:58

@marcusklaas, the added value is that it may work in cases where the posted solution does not, or may be easier to implement. I don't remember much about this since it was a month ago. – Chancellorsville 29/12, 2011 at 0:46

I dig the solution, but you might need overflow-x: hidden to prevent horizontal scrollbars. That took a bit to figure out. – Chicory 3/4, 2012 at 12:22

Link to "reference" appears dead. – Aubarta 28/2, 2019 at 2:51

.center {
  display: table;
  margin: auto;
}

Observer answered 10/4, 2012 at 22:54 Comment(3)

this worked out much better for me than the accepted answer, try both! – Intervale 25/3, 2013 at 18:8

I prefer this method better as well, but it works on IE8+ so if you need IE7 you should use the accepted answer. – End 5/5, 2013 at 20:26

Thanks- saved my time, really! – Asir 5/8, 2015 at 18:48

You can use fit-content value for width.

#wrap {
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  margin: auto;   
}

Note: It works only in latest browsers.

Ty answered 13/8, 2013 at 10:17 Comment(0)

This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution

        #container {
            text-align: center;
        }
        #contained {
            text-align: left;
            display: inline-block;
        }

Waiver answered 24/11, 2014 at 11:47 Comment(1)

This actually worked great. The combination of display: inline-block and text-align: center does the trick. – Gyral 9/4, 2018 at 22:7

Say you have a DIV you want centred horizontally:

 <div id="foo">Lorem ipsum</div>

In the CSS you'd style it with this:

#foo
{
  margin:0 auto; 
  width:30%;
}

Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.

Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.

But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.

Pew answered 5/8, 2009 at 9:31 Comment(3)

The only issue here is that you have to explicitly set the width; width: auto; doesn't work (AFAIK). – Abhenry 5/8, 2009 at 9:37

Correct, you do have to set something as the width. But the question was asking about variable width, hopefully that's not another word for auto and instead some fluctuating value or relative amount, like em's or % – Pew 5/8, 2009 at 9:43

Thanks for your answer, actually I don't have a problem with centering elements, what I'm trying to do is center a "floating element". I know this is not possible in CSS but was hoping somebody might have a hack that can work for this, I even tried to use a table but that didn't work too. Unfortunately in my scenario there's no way to make the element not floating, I need this for specific reasons. – Umbilical 5/8, 2009 at 9:44

The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:

#wrap {
    float: right;
    position: relative;
    left: -50%;
}
#content {
    left: 50%;
    position: relative;
}

Proof that it is working!

To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!

Rozina answered 15/4, 2014 at 21:49 Comment(0)

Can't you just use display: inline block and align to center?

Example.

Joyce answered 7/5, 2011 at 19:46 Comment(3)

inline-block good solution! at least you got +1 after 7 years ;) – Protuberant 7/12, 2018 at 11:30

This is what worked good for me, thank you! – Taranto 9/1, 2023 at 20:56

inline-block +1 after 12 years! – Revalue 12/5, 2023 at 9:12

for 50% element

width: 50%;
display: block;
float: right;
margin-right: 25%;

Allethrin answered 8/11, 2020 at 0:7 Comment(0)

Recommended topics

Hot tags