För att centrera ett blockelement horisontellt (som <div>), använd margin: auto;
Genom att ställa in bredden på elementet kommer det att förhindra att det sträcker sig ut till kanterna på dess behållare.
Elementet kommer då att ta upp den angivna bredden och det återstående utrymmet kommer att delas lika mellan de två marginalerna:
This div element is centered.
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p>Hello World!</p>
</div>
</body>
</html>
Obs! Centerjustering har ingen effekt om egenskapen width
inte är inställd (eller ställ in på 100%).
För att bara centrera texten inuti ett element, använd text-align: center;
This text is centered.
.center {
text-align: center;
border: 3px solid green;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center Text</h2>
<div class="center">
<p>This text is centered.</p>
</div>
</body>
</html>
Tips: För fler exempel på hur man justerar text, se kapitlet CSS-text.
För att centrera en bild, ställ in vänster och höger marginal på auto
och gör den till ett block
-element:
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>
<img src="paris.jpg" alt="Paris" style="width:40%">
</body>
</html>
En metod för att justera element är att använda position: absolute;
:
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the position property</h2>
<p>An example of how to right align elements with the position property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Obs! Absolut placerade element tas bort från det normala flödet och kan överlappa element.
En annan metod för att justera element är att använda egenskapen float
:
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Right align with the float property</h2>
<p>An example of how to right align elements with the float property:</p>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>
</body>
</html>
Obs! Om ett element är högre än elementet som innehåller det, och det är flytande, kommer att svämma över utanför sin behållare. Du kan använda "clearfix-hacket" för att fixa detta (se exempel nedan).
Sedan kan vi lägga till clearfix-hacket till det innehållande elementet för att fixa det här problemet:
.clearfix::after {
content: "";
clear: both;
display: table;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
Det finns många sätt att centrera ett element vertikalt i CSS. En enkel lösning är att använda topp och botten stoppning
:
I am vertically centered.
.center {
padding: 70px 0;
border: 3px solid
green;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Center vertically with padding</h2>
<p>In this example, we use the padding property to center the div element vertically:</p>
<div class="center">
<p>I am vertically centered.</p>
</div>
</body>
</html>
För att centrera både vertikalt och horisontellt, använd padding
och text-align: center
:
I am vertically and horizontally centered.
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
</head>
<body>
<h2>Center with padding and text-align</h2>
<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Ett annat knep är att använda egenskapen line-height
med ett värde som är lika till egenskapen height
:
I am vertically and horizontally centered.
.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;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>Center with line-height</h2>
<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Om utfyllnad
och linjehöjd
är inte alternativ, en annan lösning är att använda positionering och egenskapen transform
:
I am vertically and horizontally centered.
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Center with position and transform</h2>
<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Tips: Du kommer att lära dig mer om transformeringsegenskapen i våra 2D Transformers Kapitel.
Du kan också använda flexbox för att centrera saker. Observera bara att flexbox inte stöds i IE10 och tidigare versioner:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid green;
}
</style>
</head>
<body>
<h2>Flexbox Centering</h2>
<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</body>
</html>
Tips: Du kommer att lära dig mer om Flexbox i vårt CSS Flexbox-kapitel.