CSS-layout - horisontal og lodret justering

Indholdsfortegnelse

Vis indholdsfortegnelse

▲ ▼

◀ ►

Center elements
horizontally and vertically

Centerjuster elementer

For at centrere et blokelement vandret (som <div>), skal du bruge margin: auto;

Indstilling af bredden af elementet forhindrer det i at strække sig ud til kanterne af dens beholder.

Elementet vil derefter optage den angivne bredde og den resterende plads vil blive delt ligeligt mellem de to marginer:

This div element is centered.

Eksempel

.center
{
  margin: auto;
   
width: 50%;
   
border: 3px solid green;
  padding: 10px;
}

Prøv det selv →

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

Bemærk: Centerjustering har ingen effekt, hvis egenskaben width ikke er angivet (eller indstillet til 100%).

Centerjuster tekst

For blot at centrere teksten inde i et element, brug text-align: center;

This text is centered.

Eksempel

.center {
  text-align: center;
  
border: 3px solid green;
}

Prøv det selv →

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

Tip: Se CSS-tekstkapitlet for flere eksempler på, hvordan man justerer tekst.

Centrer et billede

For at centrere et billede skal du indstille venstre og højre margen til auto og gøre det til et blok-element:

Eksempel

img
{
  display: block;
    margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Prøv det selv →

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

Venstre og højrejustering - Bruger position

En metode til at justere elementer er at bruge 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.

Eksempel

.right
{
  position: absolute;
   
right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Prøv det selv →

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

Bemærk: Absolut placerede elementer fjernes fra det normale flow og kan overlappe elementer.

Venstre og højrejustering - Brug af float

En anden metode til at justere elementer er at bruge egenskaben float:

Eksempel

.right
{
  float: right;
   
width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Prøv det selv →

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

Bemærk: Hvis et element er højere end det element, der indeholder det, og det er flydende, vil flyde over uden for sin beholder. Du kan bruge "clearfix-hacket" til at rette dette (se eksempel nedenfor).

Uden Clearfix

Med Clearfix

Så kan vi tilføje clearfix-hacket til det indeholdende element for at rette dette problem:

Eksempel

 .clearfix::after {
  content: "";
  clear: both;
  
  display: table;
}

Prøv det selv →

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

Centrer lodret - Brug af polstring

Der er mange måder at centrere et element lodret i CSS. En simpel løsning er at bruge top og bund polstring:

I am vertically centered.

Eksempel

.center {
  padding: 70px 0;
  border: 3px solid 
green;
}

Prøv det selv →

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

For at centrere både lodret og vandret skal du bruge padding og text-align: center:

I am vertically and horizontally centered.

Eksempel

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}

Prøv det selv →

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

Centrer lodret - Brug af linjehøjde

Et andet trick er at bruge egenskaben line-height med en værdi, der er lig med til egenskaben height:

I am vertically and horizontally centered.

Eksempel

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

Prøv det selv →

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

Centrer lodret - Brug af position og transformation

Hvis polstring og linjehøjde er ikke muligheder, en anden løsning er at bruge positionering og transform egenskaben:

I am vertically and horizontally centered.

Eksempel

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}

Prøv det selv →

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

Tip: Du vil lære mere om transformationsegenskaben i vores 2D Transformers Kapitel.

Centrer lodret - Brug af Flexbox

Du kan også bruge flexbox til at centrere ting. Bemærk blot, at flexbox ikke understøttes i IE10 og tidligere versioner:

I am vertically and horizontally centered.

Eksempel

 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}

Prøv det selv →

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

Tip: Du vil lære mere om Flexbox i vores CSS Flexbox-kapitel.

CSS-layout - horisontal og lodret justering

Indholdsfortegnelse

Center elementshorizontally and vertically

Centerjuster elementer

Eksempel

Centerjuster tekst

Eksempel

Centrer et billede

Eksempel

Venstre og højrejustering - Bruger position

Eksempel

Venstre og højrejustering - Brug af float

Eksempel

Clearfixet Hack

Uden Clearfix

Med Clearfix

Eksempel

Centrer lodret - Brug af polstring

Eksempel

Eksempel

Centrer lodret - Brug af linjehøjde

Eksempel

Centrer lodret - Brug af position og transformation

Eksempel

Centrer lodret - Brug af Flexbox

Eksempel

Center elements
horizontally and vertically