Explication détaillée d'exemples d'utilisation de blocs en ligne pour le centrage en CSS

Cet article explique principalement en détail l'exemple d'utilisation de inline-block pour le centrage en CSS Lorsque vous l'utilisez, faites attention à la largeur du conteneur. Les amis dans le besoin peuvent se référer à la

Méthode nécessaire d'urgence. : méthode de bloc en ligne Centrée. L'approche de base consiste à utiliser display : inline-block, vertical-align : middle styles et pseudo-éléments pour centrer le bloc de contenu dans le conteneur. Mon implémentation utilise plusieurs nouvelles astuces inédites pour résoudre certains problèmes.

La largeur déclarée de la zone de contenu ne peut pas être supérieure à 100 % du conteneur moins la largeur de 0,25em. Comme une zone avec un long texte. Sinon, la zone de contenu sera poussée vers le haut, c'est pourquoi la pseudo-classe :after est utilisée. L’utilisation de la pseudo-classe :before rendra l’élément à 100 % !

Si le bloc de contenu doit occuper autant d'espace horizontal que possible, vous pouvez ajouter le style max-width : 99 % au grand conteneur, ou utiliser max en considérant le navigateur. et largeur du conteneur -width : style calc(100% – 0,25em).

Cette méthode présente pour la plupart les mêmes avantages que table-cell, mais j'ai d'abord abandonné cette méthode car elle ressemblait davantage à un hack. Quoi qu’il en soit, la prise en charge du navigateur est excellente et la méthode s’avère très populaire.

HTML :

<p class="Center-Container is-Inline">
  <p class="Center-Block">
    <!-- CONTENT -->
  </p>
</p>

CSS :

.Center-Container.is-Inline {    
  text-align: center;   
  overflow: <span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=auto&k0=auto&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;   
}   

.Center-Container.is-Inline:after,   
.is-Inline .Center-Block {   
  display: inline-<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;   
  vertical-align: middle;   
}   

.Center-Container.is-Inline:after {   
  content: &#39;&#39;;   
  height: 100%;   
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}   

.is-Inline .Center-Block {   
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}

Avantages :

Hauteur du contenu Variable
Lorsque le contenu déborde, il peut automatiquement augmenter la hauteur de l'élément parent
Bonne compatibilité avec les navigateurs, et peut même être ajusté pour prendre en charge IE7

En même temps, veuillez noter :

nécessite des conteneurs supplémentaires
S'appuyant sur le style margin-left : -0,25em pour obtenir un centrage horizontal, des ajustements doivent être effectués pour différentes tailles de police
La largeur déclarée de la zone de contenu ne peut pas être supérieure à 100 % du conteneur moins la largeur de 0,25em

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!