欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

块级元素水平居中的问题

程序员文章站 2022-05-18 18:22:33
块级元素居中问题 定宽块级元素水平居中 不定宽块级元素水平居中 不定宽块级元素水平居中 不定宽块级元素水平居中 ... ......
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>块级元素居中问题</title>
  <style type="text/css">
         .one{
           width:100px;
           margin:0 auto;
           background:#ff6699;
         }
         .two{
            margin:0 auto;
            background:#ff3366;
         }
         .t-parent{
           text-align:center;
         }
         .three{
           display:inline;
           background:#3333ff;
         }

         .f-parent{
           position:relative;
           float:left;
           left:50%;
         }
         .four{
           position:relative;
           left:-50%;
           background:#000033;
         }
  </style>
 </head>
 <body>
      <!--给宽度 直接设置margin:0 auto;-->
     <div  class="one">定宽块级元素水平居中</div>
      <!--table 标签是根据里面的文本来撑开的  有文字就有宽度
            在设置 margin:0 auto;-->
     <table class="two">
         <tr>
             <td>    <div >不定宽块级元素水平居中</div></td>
         </tr>
     </table>
     <!--父元素 设置 text-align:center  子元素 设置为inline-->
      <div class="t-parent">
     <div class="three">不定宽块级元素水平居中</div>
     </div>
     <!--
         父元素设置
         position:relative;
         float:left;
         left:50%;
         子元素设置
         position:absolute;
         float:-50%;
        
     -->
     <div class="f-parent">
     <div class="four">不定宽块级元素水平居中</div>
     </div>
 </body>
</html>