Weitergabe von fortgeschrittenen CSS-Kenntnissen

Wie stelle ich die horizontale Zentrierung ein?

Es gibt zwei Situationen: Inline-Elemente und Elemente auf Blockebene

1. Inline-Elemente (wie Bilder und Text)

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

2. Elemente auf Blockebene

Die horizontale Zentrierung von Elementen auf Blockebene ist in zwei Typen unterteilt: Blockelemente mit fester Breite und Blockelemente ohne feste Breite

Blockelemente mit fester Breite (d. h. der Breitenwert von Blockelementen ist ein fester Wert):

Dies kann erreicht werden, indem der linke und rechte Rand von Elementen auf Blockebene wie folgt auf „Automatisch“ gesetzt wird

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

Blockelemente mit variabler Breite (d. h. die Breite ist ungewiss, z. B. die Seitennavigation auf einer Webseite)

Es gibt drei (häufig verwendete) Methoden, um eine horizontale Zentrierung von Elementen mit variabler Breite zu erreichen:

Die erste Methode: Verwenden Sie das Tabellen-Tag

Nutzen Sie die Längenanpassungsfähigkeit des Tabellen-Tags – – Das heißt, es definiert nicht seine Länge und verwendet nicht standardmäßig die Länge des übergeordneten Elementkörpers (Die Länge der Tabelle wird durch die Länge des darin enthaltenen Textes bestimmt), sodass sie als Blockelement mit fester Breite betrachtet werden kann und dann die Methode des zentrierten Randes mit festem Blockbreite verwendet werden kann, um sie horizontal zu zentrieren

Schritt 1: Fügen Sie ein Tabellen-Tag (einschließlich , , ) außerhalb des Elements hinzu, das zentriert werden muss.

Schritt 2: Legen Sie die „zentrierten linken und rechten Ränder“ für diese Tabelle fest (dies ist die gleiche Methode wie beim Blockelement mit fester Breite).

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

Die zweite Methode: Ändern Sie die Anzeige des Elements auf Blockebene in den Inline-Typ (stellen Sie die Anzeige auf „Inline-Element“ ein) und verwenden Sie dann text-align:center, um den Zentrierungseffekt zu erzielen. Das folgende Beispiel:

   .container{
   text-align:center;
   }
   .container ul{
   display:inine;
   list-style:none;
   padding:0;
   margin:0;
   }
   .container li{
   display:inline;
   margin-right:8px;
   }

Im Vergleich zur ersten Methode ist es nicht erforderlich, ein unsemantisches Tag (Tabelle) hinzuzufügen. Da li jedoch als Inline-Element betrachtet wird, können Attribute wie Höhe und Breite nicht hinzugefügt werden dafür eingestellt werden

Die dritte Methode: Erzielen Sie eine horizontale Zentrierung, indem Sie float für das übergeordnete Element festlegen, dann position:relative und left:50% für das übergeordnete Element festlegen und position:relative und left: -50 festlegen % für das untergeordnete Element.

   .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;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

2. Wie stelle ich die vertikale Zentrierung ein?

ist in zwei Situationen unterteilt: eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements und einen mehrzeiligen Text mit einer bestimmten Höhe des übergeordneten Elements.

Einzeiliger Text: Die vertikale Zentrierung wird erreicht, indem die Zeilenhöhe so eingestellt wird, dass sie mit der Höhe übereinstimmt.

Die Differenz zwischen den berechneten Werten von Zeilenhöhe und Schriftart -size wird zu „Zeilenabstand“. Teilen Sie es in zwei Hälften und fügen Sie diese oben und unten in eine Textzeile ein.

Diese Art von Textzeilenhöhe und Blockhöhe bringt einen Nachteil mit sich: Wenn die Länge des Textinhalts größer als die Breite des Blocks ist, befindet sich der Inhalt außerhalb des Blocks.

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

Aber diese Methode hat einen Nachteil: Wenn die Länge des Textes länger als die Breite des Blocks ist, fällt der Inhalt aus dem Block.

Mehrzeiliger Text:

Es gibt zwei Methoden:

Verwenden Sie das Tabellen-Tag und verwenden Sie Vertical-Align:Middle (beachten Sie, dass das td-Tag vertikal ist -align standardmäßig eingestellt :middle

Wir müssen es also nicht manuell festlegen

table td{
height:500px;
background:#purple;
}
<table>
    <tbody>
    <tr><td>
    <div>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    </div>
    </tr></tr>
    </tbody>
</table>

Der letzte Trick besteht darin, die Anzeige implizit zu ändern Attribut. Wenn Sie eine der folgenden beiden Anweisungen für ein Element festlegen:

float:right oder float:right

position:absolute

wird der Anzeigetyp des Elements geändert automatisch zur Anzeige wechseln: Inline-Block Zu diesem Zeitpunkt können Sie die Breite und Höhe des Elements festlegen, z. B.

<style type="text/css">
.container a{
    position:absolute;
    width:100px;
    height:50px;
    background:purple;
}
</style>
<body>
    <div class="container">
      <a href="#">
          I am CEO,you son of bitch.
      </a>
    </div>
</body>

Das obige ist der detaillierte Inhalt vonWeitergabe von fortgeschrittenen CSS-Kenntnissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!