What should you pay attention to when centering elements in HTML?-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

What should you pay attention to when centering elements in HTML?

php中世界最好的语言

Feb 22, 2018 am 09:27 AM

html Which

This time I will bring you what you need to pay attention to about the centering of elements in HTML. What you need to pay attention to about the centering of elements in HTML. The following is a practical case, let's take a look.

Do not use positioning

Horizontal centering: text-align = center; (inheritable)

Vertical centering: margin:0 auto;( Block-level elements)

Others centered: 1. Text centering: set the height of the parent element and set the height of the child element line-height=height (parent element)

　　　　 2. Picture Centered: vertical-aign: middle; <-- must be placed in the picture element

.first{
    width: 300px;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0 auto; //针对块级元素
  }

Copy after login

<div class="first">
不使用定位（1）
</div>

Copy after login

.second{
    width: 300px;
    height: 100px;
    background-color: green;
  }
  .s_child{
    width: 150px;
    line-height: 100px;
  }
<div class="second">    
<div class="s_child">   
   不使用定位（2）    
</div> 
</div>

Copy after login

2. Positioning and centering

a. The height of the parent element is fixed.

Parent element: Relative positioning

Child element: Absolute positioning

Top:50% (half the height of the parent element)

Left:50%

　　　　margin-top: half of its own height; (add a negative sign)

　　　 margin-left: half of its own width; (add a negative sign)

.dw_one{
      width: 600px;
      height: 300px;
      position: absolute;
      background: black;
    }
    .dw_one_child{
      background: white;
      position: relative;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
    <div class="dw_one">
    <div class="dw_one_child">
      a    
    </div>
    </div>

Copy after login

b .The height of the parent element is not fixed

.wrapper{
      width: 600px;
      height: 600px;
    }
    .dw_two{
      width: 100%;
      height: 100%;
      position: absolute;
      background: black;
    }
    .dw_two_child{
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
    <div class="wrapper">
  <div class="dw_two">
      <div class="dw_two_child">
        a
      </div>
  </div>
</div>

Copy after login

3. Regarding the centering of multi-line text

Use display:table; display:table-cell;

　vertical-align :middle; Center

#outer{
           width: 200px;
           height: 200px;
           background: #cccccc;
           display: table;
           _position: relative;   // "_"为了兼容IE6
       }
       #inner{
           display: table-cell;
           vertical-align: middle;
           _position: absolute;
           _top: 50%;
       }
       #content{
           _position: relative;
           _top: -50%;
       }
<div id="outer">
     <div id="inner">
       <div id="content">
          Paradise_追逐者所写的居中问题总结之我见
       </div>
    </div>
</div>

Copy after login

I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!