Welche Möglichkeiten gibt es, Bilder in Divs mithilfe von CSS zu zentrieren?

Dieser Artikel stellt vier Methoden zum Zentrieren von Bildern in Divs vor. Ich hoffe, dass er für alle hilfreich ist.

Methode 1:

(Empfohlenes Tutorial: css-Video-Tutorial)

html:

  <div class="title">
            <div class="flag"></div>
            <div class="content">
                <img src="img_p1_title.png">
            </div>
        </div>

css

.title {
   width: 100%;
    font-size: 0;
    height: 10%;
}
.title .content img {
    width: 35%;
}
/*--主要的--*/
.content{
    display: inline-block;
    vertical-align: middle;
  }
.flag{
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
  }

Methode 2:

html

  <div class="title">
  <img src="img_p1_title.png">

css

.title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title img {
  width: 35%;
}//该方法有些旧系统不支持

Methode drei:

html

 <div class="title">
<span>第三种方法</span>

css

.title {
   height: 15%;
   font-size: 18px;
   position: relative;
}

.title span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Methode 4:

html

<div class="title">
<span>第四种方法</span>

css

 .title {
    width: 200px;
    height: 200px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
}

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Bilder in Divs mithilfe von CSS zu zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!