How to horizontally center a floating element of a variable width

Question

How to horizontally center a floating element of a 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

User · Answer

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

User · Answer

center     display  table    margin  auto

User · Answer

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

User · Answer

for 50  element width  50   display  block  float  right  margin-right  25

User · Answer

Can t you just use display  inline block and align to center    Example

User · Answer

Say you have a DIV you want centred horizontally     lt div id  foo  gt Lorem ipsum lt  div gt    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

User · Answer

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

User · Answer

Assuming the element which is floated and will be centered is a div with an id  content            lt body gt   lt div id  wrap  gt      lt div id  content  gt     This will be centered     lt  div gt   lt  div gt   lt  body gt    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

[css] How to horizontally center a floating element of a variable width?

Examples related to css

Examples related to css-float

Examples related to positioning

Examples related to centering

Examples related to variable-width