26. February 2014
von Blackbam

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

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: ,

Warning: Use of undefined constant Ext_related_links - assumed 'Ext_related_links' (this will throw an Error in a future version of PHP) in /home/.sites/609/site1266/web/blackbams-blog/wp-content/themes/SilentWoodsByBlackbam/single.php on line 75

No comments yet

Kommentare abonnieren (RSS) or URL Trackback

Leave a comment:

Warning: include_once(/home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache-premium/pro/library/lazy-load.php): failed to open stream: No such file or directory in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 763 Warning: include_once(): Failed opening '/home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache-premium/pro/library/lazy-load.php' for inclusion (include_path='.:/usr/local/php5/lib/php') in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 763 Fatal error: Uncaught Error: Call to a member function lazy_load() on null in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php:766 Stack trace: #0 [internal function]: WpFastestCacheCreateCache->callback('...', 9) #1 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/functions.php(4469): ob_end_flush() #2 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/class-wp-hook.php(288): wp_ob_end_flush_all('') #3 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/class-wp-hook.php(312): WP_Hook->apply_filters('', Array) #4 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/plugin.php(478): WP_Hook->do_action(Array) #5 /home/.sites/609/site1266/web/blackbams-blog/wp-includes/load.php(947): do_action('shutdown') #6 [internal function]: shutdown_action_hook() #7 {main} thrown in /home/.sites/609/site1266/web/blackbams-blog/wp-content/plugins/wp-fastest-cache/inc/cache.php on line 766