Ausführliche Erläuterung von Beispielen für die Verwendung von Inline-Block zur Zentrierung in CSS

In diesem Artikel wird hauptsächlich das Beispiel der Verwendung von Inline-Block zur Zentrierung in CSS erläutert. Achten Sie bei der Verwendung auf die Breite des Containers.

Dringend benötigte Methode : Inline-Block-Methode Zentriert. Der grundlegende Ansatz besteht darin, die Stile display: inline-block, Vertical-align: middle und Pseudoelemente zu verwenden, um den Inhaltsblock im Container zu zentrieren. Meine Implementierung verwendet mehrere neue Tricks, die es anderswo nicht gibt, um einige Probleme zu lösen.

Die deklarierte Breite des Inhaltsbereichs darf nicht größer als 100 % des Containers abzüglich der Breite von 0,25 em sein. Wie ein Bereich mit langem Text. Andernfalls wird der Inhaltsbereich nach oben verschoben, weshalb die Pseudoklasse :after verwendet wird. Durch die Verwendung der :before-Pseudoklasse wird das Element auf 100 % Größe gebracht!

Wenn der Inhaltsblock so viel horizontalen Platz wie möglich einnehmen muss, können Sie dem großen Container den Stil „max-width: 99%;“ hinzufügen oder bei Berücksichtigung des Browsers „max“ verwenden und Containerbreite. -width: calc(100% – 0.25em) Stil.

Diese Methode hat die gleichen Vorteile wie die Tabellenzelle, aber ich habe diese Methode zunächst aufgegeben, weil sie eher ein Hack war. Unabhängig davon ist die Browserunterstützung großartig und hat sich als sehr beliebte Methode erwiesen.

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+ */
}

Vorteile:

Inhaltshöhe Variable
Wenn der Inhalt überläuft, kann die Höhe des übergeordneten Elements automatisch erweitert werden
Gute Browserkompatibilität und kann sogar an die Unterstützung von IE7 angepasst werden

Beachten Sie gleichzeitig Folgendes:

erfordert zusätzliche Container
Wenn man sich auf den Stil „margin-left: -0.25em“ verlässt, um eine horizontale Zentrierung zu erreichen, müssen Anpassungen für unterschiedliche Schriftgrößen vorgenommen werden
Die deklarierte Breite des Inhaltsbereichs darf nicht größer als 100 sein % des Containers minus der Breite von 0,25em

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von Beispielen für die Verwendung von Inline-Block zur Zentrierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!