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

Ü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 e388a4556c0f65e1904146cc1a846bee
2     垂直水平居中
3 94b3e26ee717c64999d7867364b1b4a3

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

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

e388a4556c0f65e1904146cc1a846bee垂直水平居中94b3e26ee717c64999d7867364b1b4a3

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

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 8cfb616408c43fb55cbe9d0aaf186081国际《儿童权利公约》界定的儿童系指18岁以下的任何人54bdf357c58b8a65c66d7c19c8e4d114
3 94b3e26ee717c64999d7867364b1b4a3

 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 }

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 e388a4556c0f65e1904146cc1a846bee
2     e388a4556c0f65e1904146cc1a846bee国际《儿童权利公约》界定的儿童系指18岁以下的任何人94b3e26ee717c64999d7867364b1b4a3
3 94b3e26ee717c64999d7867364b1b4a3

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 }

　

 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 }

 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 }

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 }

1. Zentrieren Sie es horizontal

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

　

---

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;
}

　　定位+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;
}

　　 overflow: hidden;margin值

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

　　padding值

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

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

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

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

　　用background实现

1 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3

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

　　效果如下：

　　

 原文来自：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!