suchen

Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion zur horizontalen Zentrierung der CSS-Verarbeitung

Eine kurze Diskussion zur horizontalen Zentrierung der CSS-Verarbeitung

高洛峰
高洛峰Original
2017-03-02 15:44:051387Durchsuche

Der folgende Editor bietet Ihnen eine kurze Diskussion zum Thema der horizontalen Zentrierung der CSS-Verarbeitung. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an. Ich wünsche Ihnen allen ein frohes Spiel das übergeordnete Element; zentrieren Sie den Inhalt des übergeordneten Elements

2. Horizontale Zentrierungseinstellung – Blockelement mit fester Breite

Die Breite des Blockelements ist fest Wert, indem Sie den Wert „Linker und rechter Rand“ auf „Auto“ setzen, um eine zentrierte Einstellung zu erreichen - Blockelement mit variabler Breite

Methode 1.

Tabellen-Tag hinzufügen

Beispiel: 
<!DOCTYPE HTML>    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<title>定宽块状元素水平居中</title>    
<style>    
p{    
    width: 200px;/*固定的宽度*/
    margin: 20px auto;/*左右margin设置为auto*/
    border: 1px solid red;    
}    
</style>    
</head>    
<body>    
<p>我是定宽块状元素，我要水平居中显示。</p>    
</body>    
</html>



Methode 2.

Legen Sie die display:inline;-Methode fest, ähnlich der ersten Methode Anzeigetyp für Inline-Elemente, fahren Sie fort Attributeinstellungen für Elemente mit variabler Breite 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table{   
    margin:0 auto;   
}   
/*下面是任务区代码*/   
.wrap{   
    background:#ccc;   
}   
</style>
</head>
<body>
<table>
  <tbody>
    <tr><td>
        <p class="wrap">
            我要水平居中     
        </p>
    </td></tr>
  </tbody>
</table>

</body>
</html>
Beispiel:


Methode 3.

Position festlegen: relativ und links: 50 % Verwenden Sie die relative Positionierung, um das Element um 50 % nach links zu verschieben, d. h. um den Zweck der Zentrierung zu erreichen Beispiel: 

<!DOCTYPE HTML>   
<html>   
<head>   
<meta charset="utf-8">   
<title>不定宽块状元素水平居中</title>   
<style>   
.container{text-align:center;}   
.container ul{list-style:none;margin:0;padding:0;display:inline;}   
.container li{margin-right:8px;display:inline;}   
</style>   
</head>   

<body>   
<p class="container">   
    <ul>   
        <li><a href="#">1</a></li>   
        <li><a href="#">2</a></li>   
        <li><a href="#">3</a></li>   
    </ul>   
</p>   
</body>   
</html>

Diese kurze Diskussion zum Thema CSS-Verarbeitungsebenenzentrierung ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder das PHP-Chinesisch unterstützt Webseite.

Weitere verwandte Artikel zur Zentrierung der CSS-Verarbeitungsebene finden Sie auf der chinesischen PHP-Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel für die Umwandlung eines Bildes in den Graumodus mithilfe von CSS3Nächster Artikel：Beispiel für die Umwandlung eines Bildes in den Graumodus mithilfe von CSS3

In Verbindung stehende Artikel

Mehr sehen