CODEWITHSUNDEEP
html
pmchrislee
pmchrislee

Reputation: 159

How do I horizontally center <div> block elements?

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">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 -->

Upvotes: 1

Views: 4070

Answers (3)

Dexter
Dexter

Reputation: 5726

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

Upvotes: 4

Adam
Adam

Reputation: 12650

div {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

Upvotes: 5

Dustin Laine
Dustin Laine

Reputation: 38503

<div style="margin: 0 auto;">Some content</div>

Upvotes: 5

Related Questions