Wie zentriere ich Inhalt in einem div mit CSS?

Wie zentriere ich Inhalt in einem div sowohl horizontal als auch vertikal?Wie zentriere ich Inhalt in einem div mit CSS?

Quelle

2010-12-07 Thomas

Thomas dies auch http://www.vdotmedia.com/ demo/css-vertical-center.html – kobe

Er fragt: "Wie zentriere ich den Inhalt eines div, vertikal und horizontal." – nycynik

Für horizontale Ausrichtung hilft das vielleicht: http://www.w3schools.com/css/css_align.asp – Manfred

Dieser Ihre Bedürfnisse passen sollte. Es ist ein CSS-2D-Übergangstrick. Ich habe über die folgende Lösung vor kurzem kommen:

* { 
 
    font-family: Arial; 
 
    font-size: 14px; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 

 
*:after, 
 
*:before { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
*:after { 
 
    clear: both; 
 
} 
 

 
.title { 
 
    font-family: Georgia; 
 
    font-size: 36px; 
 
    line-height: 1.25; 
 
    margin-top: 0; 
 
} 
 

 
.blocks { 
 
    position: relative; 
 
} 
 

 
.block { 
 
    position: relative; 
 
    display: inline-block; 
 
    float: left; 
 
    width: 200px; 
 
    height: 200px; 
 
    font-weight: bold; 
 
    color: #FFFFFF; 
 
    margin-right: 10px; 
 
    margin-bottom: 10px; 
 
} 
 

 
.block:first-child { 
 
    background-color: green; 
 
} 
 

 
.block:nth-child(2) { 
 
    background-color: red; 
 
} 
 

 
.block:nth-child(3) { 
 
    background-color: blue; 
 
} 
 

 
.h-center { 
 
    text-align: center; 
 
} 
 

 
.v-center span { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 50%; 
 
    transform: translate(0, -50%); 
 
}

<h1 class="title">3 Boxes with different text-align settings.</h1> 
 
<div class="blocks"> 
 
    <div class="block h-center">horizontally centered lorem ipsun dolor sit amet</div> 
 
    <div class="block v-center"><span>vertically centered lorem ipsun dolor sit amet lorem ipsun dolor sit amet</span></div> 
 
    <div class="block h-center v-center"><span>horizontally and vertically centered lorem ipsun dolor sit amet</span></div> 
 
</div>

Hinweis: Diese mit nicht auch arbeiten: nach und: vor Pseudo-Elementen.

Sie können hier lesen: css-tricks.com

Sie hier testen: jsfiddle

Quelle

2015-02-13 19:59:08

Zum Ausrichten horizontal es ziemlich geradlinig ist:

<style type="text/css"> 
body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
} 
.bodyclass #container { 
    width: ???px; /*SET your width here*/ 
    margin: 0 auto; 
    text-align: left; 
} 
</style> 
<body class="bodyclass "> 
<div id="container">type your content here</div> 
</body>

und für die vertikale Ausrichtung, es ist ein bisschen schwierig: hier ist die source

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
    <title>Universal vertical center with CSS</title> 
    <style> 
    .greenBorder {border: 1px solid green;} /* just borders to see it */ 
    </style> 
</head> 

<body> 
    <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;"> 
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> 
     <div class="greenBorder" style=" #position: relative; #top: -50%"> 
     any text<br> 
     any height<br> 
     any content, for example generated from DB<br> 
     everything is vertically centered 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Quelle

2010-12-07 08:34:30 AnD

Ich möchte Inhalt in der div sollte horizontal und vertikal zentriert sein. nicht in der Mitte div auf der Seite. – Thomas

mit all dem Einstellring css. wenn möglich, wickelt mit einem Tisch mit einer Höhe und Breite, als 100% und td align es vertikal zur Mitte gesetzt, text-align zum Zentrum

Quelle

2016-01-10 14:45:58

Wie zentriere ich Inhalt in einem div mit CSS?

Antwort

Verwandte Themen