CSS -uitleg - Horisontaal en Vertikaal Belyn
Sentreer elemente
horisontaal en vertikaal
Sentrumbelyningselemente
Om 'n blokelement (soos <div>) horisontaal te sentreer, gebruik margin: auto;
Deur die breedte van die element te stel, sal dit verhoed dat dit tot by die rande van sy houer uitstrek.
Die element sal dan die gespesifiseerde breedte opneem, en die oorblywende spasie sal gelykop tussen die twee kantlyne verdeel word:
Hierdie div-element is gesentreer.
Voorbeeld
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Let wel: Sentrumbelyning het geen effek as die widtheienskap nie gestel is nie (of gestel is op 100%).
Sentreer-belyn teks
Om net die teks binne 'n element te sentreer, gebruik text-align: center;
Hierdie teks is gesentreer.
Voorbeeld
.center {
text-align: center;
border: 3px solid green;
}
Wenk: Vir meer voorbeelde oor hoe om teks in lyn te bring, sien die CSS-teks - hoofstuk.
Sentreer 'n prent
Om 'n prent te sentreer, stel die linker- en regterkantlyn op autoen maak dit 'n blockelement:
Voorbeeld
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Links en regs belyn - Gebruik posisie
Een metode om elemente in lyn te bring is om te gebruik position: absolute;:
In my jonger en meer kwesbare jare het my pa my raad gegee wat ek sedertdien in my gedagtes omgedraai het.
Voorbeeld
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Let wel: Absolute geposisioneerde elemente word uit die normale vloei verwyder, en kan elemente oorvleuel.
Links en regs belyn - Gebruik vlotter
Nog 'n metode om elemente in lyn te bring, is om die floateiendom te gebruik:
Voorbeeld
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Die duidelike oplossing Hack
Let wel: As 'n element hoër is as die element wat dit bevat, en dit dryf, sal dit buite sy houer oorloop. Jy kan die "clearfix hack" gebruik om dit reg te stel (sien voorbeeld hieronder).
Sonder Clearfix
Met Clearfix
Dan kan ons die clearfix-hack by die bevat-element voeg om hierdie probleem op te los:
Voorbeeld
.clearfix::after {
content: "";
clear: both;
display: table;
}
Sentreer vertikaal - Gebruik vulling
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.