Blackbams Blog
development – digital arts – internet
Knowledge is free. No one may take possession of it.
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;
}
Warning: Undefined variable $time_since in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 42 Dieser Eintrag wurde am 26. February 2014 um 2:02 in der Kategorie CSS veröffentlicht. You can book the comments for this article RSS 2.0. Feedback, discussion, commendation and critics are welcome: Write a comment or trackback.
Tags: CSS basics, Web
Fatal error: Uncaught Error: Undefined constant "Ext_related_links" in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php:75 Stack trace: #0 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/template-loader.php(106): include() #1 /home/.sites/609/site1266/web/blackbams-blog/wp-blog-header.php(19): require_once('/home/.sites/60...') #2 /home/.sites/609/site1266/web/blackbams-blog/index.php(17): require('/home/.sites/60...') #3 {main} thrown in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75