Informationen zur Verwendung von CSS zum vertikalen und horizontalen Zentrieren von Text und Bildern

黄舟

Freigeben： 2017-06-06 13:25:26

Original

2050 Leute haben es durchsucht

Über die Verwendung von CSS zum Implementieren von Text und Bildernvertikal und horizontal zentriert

Ich habe immer geglaubt, dass ein gutes Gedächtnis nicht so gut ist wie ein schlechter Stift. In letzter Zeit bin ich auf eine Menge vertikaler Zentrierung gestoßen zukünftige Referenz.

1. Zentrieren Sie den Text vertikal und horizontal

1 :

Zur horizontalen Zentrierung des Textes gibt es nichts zu sagen. Dies kann einfach durch die Verwendung von text-align:center; erreicht werden.

2. Vertikal zentriert:

1) Einfacher einzeiliger Text

　Verwenden Sie line-height==height, um einen einzelnen Text zu erstellen -zeiliger Text Vertikal zentriert.

1 <p>
2     垂直水平居中
3 </p>

Nach dem Login kopieren

1 p{
2     width: 200px;
3     height: 200px
4     text-align: center;
5     line-height: 200px;
6     background:#1AFF00;7 }

Nach dem Login kopieren

Um es einfach auszudrücken: Verwenden Sie einfach das p-Tag, etwa so:

<p>垂直水平居中</p>

Nach dem Login kopieren

1 p{
2     width: 200px;
3     height: 200px;
4     text-align: center;
5     line-height: 200px;
6     background:#00ABFF;7 
}

Nach dem Login kopieren

Der Effekt ist wie folgt:

2) Mehrzeiliger Text

Unter Verwendung der Eigenschaften des table-Elements display: table;inline elementdisplay: table-cell; vertikal-align : middle; +trans

for

m: translatorY(-50%);

1 <p
2     <span>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</span>
3 </p>

Nach dem Login kopieren

 1 p{ 
 2     width: 200px; 
 3     height: 200px; 
 4     display: table; 
 5     background:#1AFF00; 
 6 } 
 7 span{ 
 8     display: table-cell; 
 9     vertical-align: middle;10 }

Nach dem Login kopieren

Beide haben eine feste Breite und eine feste Höhe. Das übergeordnete Element verwendet den Wert

padding

, der der Höhe des übergeordneten Elements minus der halben Höhe des untergeordneten Elements entspricht

1 <p>
2     <p>国际《儿童权利公约》界定的儿童系指18岁以下的任何人</p>
3 </p>

Nach dem Login kopieren

Beide haben eine feste Breite und eine feste Höhe, das übergeordnete Element verwendet Überlauf

: versteckt; (CSS-Hack) das untergeordnete Element verwendet einen Randwert, dieser Wert ist die Höhe des übergeordneten Elements das Element minus der halben Höhe des untergeordneten Elements

hat folgenden Effekt:

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background: #00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     transform: translateY(-50%);14 }

Nach dem Login kopieren

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 50%;
 10     left: 0;
 11     width: 200px;
 12     height: 64px;
 13     margin-top: -32px;
 14 }

Nach dem Login kopieren

 1 p{ 
 2     position: relative; 
 3     width: 200px; 
 4     height: 200px; 
 5     background:#00ABFF; 
 6 } 
 7 p{ 
 8     position: absolute; 
 9     top: 0;
 10     left: 0;
 11     right: 0;
 12     bottom: 0;
 13     margin: auto;
 14     width: 200px;
 15     height: 64px;
 16 }

Nach dem Login kopieren

2. Zentrieren Sie das Bild vertikal und horizontal

 1 p{ 
 2     width: 200px; 
 3     height: 64px; 
 4     padding: 68px 0; 
 5     background:#1AFF00; 
 6 } 
 7 p{ 
 8     width: 200px; 
 9     height: 64px;
 10 }

Nach dem Login kopieren

1. Zentrieren Sie es horizontal

p{
    width: 200px;
    height: 200px;
    overflow: hidden;
    background:#00ABFF;
}
p{
    width: 200px;
    height: 64px;
    margin:68px auto;
}

Nach dem Login kopieren

1) img ist in der anfänglichen CSS-Einstellung ein Inline-Block-Element. Wenn Sie es horizontal zentrieren möchten, verwenden Sie text-align:center ;

2) Legen Sie display:block für das img-Element fest. Wenn Sie es horizontal zentrieren möchten, verwenden Sie margin: 0 automatisch;

2. Vertikal zentriert

1.jpg

Verwenden Sie dieses Bild als Demonstration

line-height==height Vertical-align: middle;

　display: table-cell;vertical-align: middle;display: table-cell;vertikal-align: middle; text-align: centre; Positionierung+display: block;transform: Translate(-50%,-50%);

Positionierung+Marge negativer Wert

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -75px 0 0 -75px;
}

Nach dem Login kopieren

　　定位+margin: auto;

p{
    position: relative;
    width: 198px;
    height: 198px;
    border: 1px solid #8900FF;
}
img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

Nach dem Login kopieren

　　 overflow: hidden;margin值

p{
    width: 198px;
    height: 198px;
    overflow: hidden;
    border: 1px solid #8900FF;
}
img{ 8     margin: 25px;
}

Nach dem Login kopieren

　　padding值

 p{
 2     padding: 25px;
 3     width: 148px;
 4     height: 148px;
 5     border: 1px solid #8900FF;
 6 }

Nach dem Login kopieren

　　用table的属性+vertical-align: middle;实现

1 <p>2     <span><img alt="" src="1.jpg" /></span>3 </p>

Nach dem Login kopieren

p{
    display: table;
    width: 198px;
    height: 198px;
    text-align: center;
    border: 1px solid #8900FF;
}
span{
    display:table-cell;
    vertical-align: middle;
}

Nach dem Login kopieren

　　用background实现

1 <p></p>

Nach dem Login kopieren

1 p{
2     width: 198px;
3     height: 198px;
4     border: 1px dashed #8900FF;
5     background: url(1.jpg) no-repeat center center;
6 }

Nach dem Login kopieren

　　效果如下：

原文来自：http://www.cnblogs.com/Ni-F/p/6937931.html 感谢作者分享！

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung von CSS zum vertikalen und horizontalen Zentrieren von Text und Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!