Comment centrer du contenu dans un div en utilisant CSS?

Comment puis-je centrer le contenu d'une div à la fois horizontalement et verticalement?Comment centrer du contenu dans un div en utilisant CSS?

Source

2010-12-07 Thomas

Thomas Voir aussi ce http://www.vdotmedia.com/ demo/css-verticalically-center.html – kobe

Il demande: "Comment centrer le contenu d'un div, verticalement et horizontalement?" – nycynik

Pour l'alignement horizontal peut-être cela aide: http://www.w3schools.com/css/css_align.asp – Manfred

Cela devrait répondre à vos besoins. C'est un tour de transition CSS-2D. J'ai récemment rencontré la solution suivante:

* { 
 
    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>

Note: Cela ne fonctionne aussi avec: après et: avant pseudo-éléments.

Vous pouvez lire ici: css-tricks.com

Vous pouvez tester ici: jsfiddle

Source

2015-02-13 19:59:08

Pour aligner horizontalement, il est assez simple:

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

et alignement vertical, il est un peu délicat: ici est le 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>

Source

2010-12-07 08:34:30 AnD

Je veux que le contenu de la div soit centré horizontalement et verticalement. pas centre div dans la page. – Thomas

avec tout le réglage css. si possible, l'envelopper avec une table avec la hauteur et la largeur de 100% et td fixé à alignement vertical au milieu, text-align pour centrer

Source

2016-01-10 14:45:58

Comment centrer du contenu dans un div en utilisant CSS?

Répondre

Questions connexes