CSS basics – Blackbams Blog https://blog.blackbam.at development - digital arts - internet Wed, 26 Feb 2014 00:46:51 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.1 How to center a div with floating elements and variable width horizontally using pure CSS https://blog.blackbam.at/2014/02/26/how-to-center-a-div-with-floating-elements-and-variable-width-horizontally-using-pure-css/ https://blog.blackbam.at/2014/02/26/how-to-center-a-div-with-floating-elements-and-variable-width-horizontally-using-pure-css/#respond Wed, 26 Feb 2014 00:43:31 +0000 https://blog.blackbam.at/?p=2171 In this very short article I am going to show you how to center a div containing floating elements horizontally with pure CSS. Although it should be a simple problem, sometimes it can be annoying to get something centered. So here is a very simple solution for this problem:

How to center a div:

  
  margin: 0 auto;

 

How to center text elements:

  
  text-align:center;

 

How to center a div containing floating elements:

HTML:

 

<div id=”wrapper”>
<div id=”div_to_center”>
<ul>
<li class=”item”>abc</li>
<li class=”item”>def</li>
</ul>
</div>
</div>

 

 
  
#wrapper {
    text-align:center;
}

#div_to_center {
    margin:0 auto;
    display:inline-block;
}

#div_to_center .item {
    float:left;
    display:inline-block;
}

Share

]]> https://blog.blackbam.at/2014/02/26/how-to-center-a-div-with-floating-elements-and-variable-width-horizontally-using-pure-css/feed/ 0