CSS-Bildzentrierungsmethode mit variabler Größe

CSS ist eine unverzichtbare Sprache für die Front-End-Entwicklung. In diesem Artikel wird hauptsächlich die CSS-Zentrierungsmethode mit einer variablen Größe vorgestellt. Jetzt werde ich sie mit Ihnen teilen als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Verwenden Sie die Tischzelle, um eine vertikale Zentrierung zu erreichen

<p class="box1">
    [站外图片上传中……(5)]
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

Verwenden Sie das übergeordnete Element, um die vertikale Zentrierung für den Typ display:table-cell zu implementieren. Die Tabelle verfügt über das vertikale Zentrierungsattribut, das in IE8+-Browsern enthalten ist.

Hinweis: img{vertical-align: middle;} dient lediglich dazu, das Problem der Grundlinienausrichtung des Typs display:inline-block zu beseitigen.

2. Methode zur vertikalen Zentrierung von mehrzeiligem Text

Manchmal kann es vorkommen, dass mehrzeiliger Text vertikal zentriert werden muss. Aber manchmal ist es etwas mühsam, und wir müssen unsere Denkweise ändern, um es zu erreichen.

<p class="box3">
    <span>你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据</span>
</p>

p{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

Umschließen Sie den internen Text mit Span-Tags (andere Tags sind ebenfalls akzeptabel) und legen Sie das Span-Tag fest Es ist ein Inline-Block und wird dann verarbeitet, wenn das Bild vertikal zentriert ist (dh 8+).

Verwandte Empfehlungen:

Drei Möglichkeiten, Bilder mit CSS zu zentrieren

Wie zentriert man Text und Bilder mit HTML-Code?

So zentrieren Sie das CSS-Bild

Das obige ist der detaillierte Inhalt vonCSS-Bildzentrierungsmethode mit variabler Größe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!