简体   繁体   中英

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 -->
<div style="margin: 0 auto;">Some content</div>
div {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
}

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM