CSS-layout - Horisontell och vertikal justering


Innehållsförteckning

    Visa innehållsförteckning

Center elements
horizontally and vertically


Centrera element

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.

Exempel

.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%).


Centrera text

För att bara centrera texten inuti ett element, använd text-align: center;

This text is centered.

Exempel

.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.



Centrera en bild

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:

Paris

Exempel

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>



Vänster och högerjustera - Använd position

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.

Exempel

.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.


Vänster- och högerjustera - Använd float

En annan metod för att justera element är att använda egenskapen float:

Exempel

.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>



Clearfixet Hack

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).

Utan Clearfix

Med Clearfix

Sedan kan vi lägga till clearfix-hacket till det innehållande elementet för att fixa det här problemet:

Exempel

 .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>



Centrera vertikalt - Använd stoppning

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.

Exempel

.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.

Exempel

.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>



Centrera vertikalt - Använder linjehöjd

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.

Exempel

.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>



Centrera vertikalt - Använd position & transform

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.

Exempel

.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.


Centrera vertikalt - med Flexbox

Du kan också använda flexbox för att centrera saker. Observera bara att flexbox inte stöds i IE10 och tidigare versioner:

I am vertically and horizontally centered.

Exempel

 .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.