À quoi devez-vous faire attention lorsque vous centrez des éléments en HTML ?-tutoriel HTML-php.cn

À quoi devez-vous faire attention lorsque vous centrez des éléments en HTML ?

php中世界最好的语言

Libérer： 2018-02-22 09:27:30

original

1786 Les gens l'ont consulté

Cette fois, je vais vous apporter ce à quoi vous devez faire attention lors du centrage d'éléments en HTML. Ce à quoi vous devez faire attention lors du centrage d'éléments en HTML. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Ne pas utiliser le positionnement

Centrage horizontal : text-align = center; (héritable)

Centrage vertical : margin:0 auto;( Block -éléments de niveau)

Autre centrage : 1. Centrage du texte : définir la hauteur de l'élément parent et définir la hauteur de l'élément enfantline-height=height (élément parent)

2. Image centrée : alignement vertical : milieu ; <-- doit être placé dans l'élément d'image

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

2. Positionnement et centrage

a. La hauteur de l'élément parent est fixe 🎜>

Élément parent : positionnement relatif

Élément enfant :

positionnement absolu

top:50% ( la moitié de la hauteur de l'élément parent)

left:50%

　　　　margin-top : la moitié de sa propre hauteur (ajouter un signe négatif)

margin; -left : la moitié de sa propre largeur (ajouter un signe négatif)

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

Copier après la connexion

b. La hauteur de l'élément parent n'est pas fixe

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

Copier après la connexion

3. Concernant le centrage du texte multiligne

Utiliser display:table display:table-cell

vertical-align:Centered

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

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web PHP chinois !

Lecture connexe :

Comment implémenter une interface de ligne de commande de type HTML

meta name="" content= "devrait Comment utiliser

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!