Eine kurze Diskussion zur horizontalen Zentrierung der CSS-Verarbeitung-CSS-Tutorial-php.cn

Eine kurze Diskussion zur horizontalen Zentrierung der CSS-Verarbeitung

高洛峰

Freigeben： 2017-03-02 15:44:05

Original

1390 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!