Heim  >  Artikel  >  Web-Frontend  >  So zentrieren Sie das Bild in Div

So zentrieren Sie das Bild in Div

迷茫
迷茫Original
2017-03-25 16:29:292156Durchsuche

Erste Methode:

<p class="title">
        <p class="flag"></p>
        <p class="content">
            <img src="img_p1_title.png">
        </p>
    </p>
.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;
  }

Zweite Methode:

<p class="title">
<img src="img_p1_title.png">
</p>
<span style="color: #000000;">.title {  <span style="color: #ff0000;">display: flex;
  just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-content: center;
  align-items: center; </span> }
.title img {
  width: 35%;
}<br/>//该方法有些旧系统不支持</span>

Dritte Methode:

<p class="title">
<span>第三种方法</span>
</p>
.title {
   height: 15%;
   font-size: 18px;   position: relative;
}
.title span {    
        position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Die vierte Methode:

<p class="title">
 <span>第四种方法</span>
</p>
.title {
    width: 200px;
    height: 200px;    
    vertical-align: middle;
    display: table-cell;
    text-align: center;
 }

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie das Bild in Div. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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