Heim > Artikel > Web-Frontend > CSS-Stileinstellungen

CSS-Stileinstellungen

高洛峰Original: 2016-10-29 11:25:162022Durchsuche

1. Einstellung der horizontalen Zentrierung

Einstellung der Inline-Elementzentrierung: Wenn das festgelegte Element ein Inline-Element wie Text oder Bild ist, wird die horizontale Zentrierung erreicht, indem text-align:center auf das übergeordnete Element festgelegt wird. Das Codebeispiel lautet wie folgt:

HTML代码
<body>
  <div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
  .txtCenter{
    text-align:center;
  }
</style>

Zentrierungseinstellung von Blockelementen mit fester Breite: Elemente, die die beiden Bedingungen „feste Breite“ und „Block“ erfüllen, können zentriert werden, indem der Wert „linker und rechter Rand“ auf festgelegt wird "Auto". Das Codebeispiel lautet wie folgt:

HTML代码
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>

Zentrierung von Blockelementen mit variabler Breite:

Das Hinzufügen des Tabellen-Tags nutzt die Längenanpassungsfähigkeit von Das Tabellen-Tag - --Das heißt, die Länge ist nicht definiert und die Länge des übergeordneten Elementkörpers ist nicht standardmäßig festgelegt (die Länge der Tabelle wird durch die Länge des darin enthaltenen Textes bestimmt), sodass sie als a betrachtet werden kann Blockelement mit fester Breite, und dann wird die zentrierte Randmethode mit fester Breite verwendet. Das Codebeispiel lautet wie folgt:

HTML代码
<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>
CSS代码
<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

2. Anzeige festlegen: Inline-Methode: Ändern Sie die Anzeige von Elementen auf Blockebene in den Inline-Typ (stellen Sie sie auf Inline-Elementanzeige ein) und verwenden Sie dann text-align: zentrieren, um den Zentriereffekt zu erzielen. Der Code lautet wie folgt:

HTML代码
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
CSS代码
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

3. Position:relativ und links:50% festlegen: Durch Festlegen von float auf das übergeordnete Element und anschließendes Festlegen von position:relativ und links:50% auf das übergeordnete Element , legt das untergeordnete Element position: relative und left: -50 % fest, um eine horizontale Zentrierung zu erreichen. Der Code lautet wie folgt:

HTML代码
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
CSS代码
<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

2. Vertikale Zentrierungseinstellung

Eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements:

Vertikale Zentrierungsmethode von eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements. Dies wird erreicht, indem die Höhe und die Zeilenhöhe des übergeordneten Elements konsistent eingestellt werden. (height: die Höhe des Elements, line-height: Wie der Name schon sagt, bezieht sich die Zeilenhöhe (Zeilenabstand) auf den Abstand zwischen den Grundlinien zwischen den Zeilen im Text). Der Code lautet wie folgt:

HTML代码
<div class="container">
    hello, world!
</div>
CSS代码
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

Mehrere Textzeilen mit einer bestimmten Höhe des übergeordneten Elements:

1 Verwenden Sie das Tag „Insert Table“ (einschließlich tbody, tr, td). und setze Vertical-Align: Middle. Es gibt in CSS ein Attribut für die vertikale Zentrierung namens „vertikal-align“. Wenn das übergeordnete Element diesen Stil festlegt, ist er für alle untergeordneten Elemente vom Inline-Block-Typ nützlich. Der Code lautet wie folgt:

HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/

2. In Chrome, Firefox und IE8 oder höher können Sie die Anzeige von Elementen auf Blockebene auf Tabellenzelle einstellen (auf Tabellenzellenanzeige einstellen), aktivieren das Vertical-Align-Attribut. Beachten Sie jedoch, dass IE6 und 7 diesen Stil nicht unterstützen und die Kompatibilität relativ schlecht ist. Der Code lautet wie folgt:

HTML代码
<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>
CSS代码
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

Der Vorteil dieser Methode besteht darin, dass keine zusätzlichen bedeutungslosen Tags hinzugefügt werden müssen, aber die Mängel liegen auch auf der Hand. Die Kompatibilität ist nicht sehr gut, und das ist auch nicht der Fall kompatibel mit IE6 und 7 und die Anzeige wird auf diese Weise geändert. Der Block wurde zu einer Tabellenzelle, wodurch die Natur der ursprünglichen Blockelemente zerstört wurde.

3. Ändern Sie implizit den Anzeigetyp

Wenn es sich um ein Element handelt (unabhängig vom vorherigen Elementtyp, außer display:none), legen Sie einen der folgenden 2 Sätze fest:

1. Position: absolut

2. float: left oder float:right

, der Anzeigetyp des Elements ändert sich automatisch in display:inline-block (Blockelement). Natürlich können Sie die Breite und Höhe des Elements festlegen, und die Standardbreite belegt nicht das übergeordnete Element. Der Code lautet wie folgt:

HTML代码
<div class="container">
    <a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

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：Definition und Verwendung der Hover-PseudoklassenauswahlNächster Artikel：Definition und Verwendung der Hover-Pseudoklassenauswahl

In Verbindung stehende Artikel

Mehr sehen