tags:

views:

78

answers:

3

I'm trying to horizontally center block elements. How can I accomplish this?

  <div class="content2">
   <div class="middle-content">
    <ul>


     <li>
      <div class="container">
       <div class="container-head">
        <div class="empty"></div>
       </div>
       <div class="content">
        <!--Place holder for member count-->
        <?php displayMemberCount(); ?>
        <!--End of Place holder for member count-->
        <div class="people-online">
         <p><strong>Paltalk</strong> makes it easy to connect with people that share your interests. <a href="http://www.paltalk.com/people/webapp/index.wmt"&gt;Browse all profiles</a></p>
         <?php members(); ?>
        </div>
        <!-- end people-online -->
       </div>
       <!-- end content -->
      </div>
      <!-- end container -->
     </li>

     <li class="last">
      <div class="container">
       <div class="container-head">
        <div class="empty"></div>
       </div>
       <div class="content">
        <!--Place holder for member count-->
        <?php displayRoomCount(); ?>
        <!--End of Place holder for member count-->
        <div class="groups-online">              
         <?php rooms(); ?>
        </div>
        <!-- end groups-online -->
       </div>
       <!-- end content -->
      </div>
      <!-- end container -->
     </li>
    </ul>
   </div>
   <!-- end middle-content -->
  </div>
  <!-- end content2 -->
 </div>
 <!-- end content -->
+4  A: 
<div style="margin: 0 auto;">Some content</div>
Dustin Laine
Never put style in your HTML. CSS should be its own deal.
DexterW
Downvote, really? This is an answer to a question, not a best practice guide to CSS. However, I agree 99% of the time, but not always. What if you did not want to make an additional HTTP request?
Dustin Laine
Dexter's (mostly) right but there is no way this answer warrants a downvote. +1
Josh Leitzel
I agree, I am an advocate of separation of CSS and markup.
Dustin Laine
I suspect someone downvoted because it needs a width to be centered.
meder
@Dustin Laine: In this case, the style attribute is not called for. This makes this answer incomplete to me.
DexterW
No, it doesn't need a width to be centered, but it needs a width for the centering to be distinguishable from doing nothing
Gareth
Using style attribute for the sake of brevity in the hopes that it may yield a quicker understanding of the techniques involved? What a concept. +1
webbiedave
+2  A: 
div {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}
Adam
+2  A: 

Give them a width and use margin: 0px auto;in your css

DexterW