CSS: align verticalement div quand aucune taille fixe de la div n'est connue

comment aligner un <div> qui contient une image (ou un flash) verticalement avec CSS. La hauteur et la largeur sont dynamiques.

45
demandé sur Sparky 2011-08-26 18:57:24
la source

9 ответов

il s'agit d'une solution CSS2 pure pour centrage horizontal et vertical sans dimensions connues de contenant ni enfant. Pas de hacks sont impliqués. Je l'ai découvert pour cette réponse et j'ai aussi démontré dans cette réponse .

la solution est basée sur vertical-align: middle en conjonction avec line-height: 0 , dont le parent a une hauteur de ligne fixe.

the HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

et la CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

testé sur Win7 dans IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

la seule mise en garde est IE7, pour lequel les deux éléments les plus intérieurs doivent déclarer à une ligne, comme démontré dans ce violon :

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

notez que les portées sont également nécessaires pour IE7. Dans tous les autres navigateurs, les spans peuvent être des div.

45
répondu NGLN 2017-05-23 14:46:40
la source

vous pouvez le faire en utilisant des blocs en ligne, un avec height: 100% (et les mêmes hauteurs pour HTML et BODY ) et vertical-align: middle .

Exemple 1: http://jsfiddle.net/kizu/TQX9b/ (beaucoup de contenu, il est donc pleine largeur)

Exemple 2: http://jsfiddle.net/kizu/TQX9b/2/ (une image avec n'importe quelle taille)

dans cet exemple j'utilise span s, donc ça marcherait en IE sans hacks, si vous voulez utiliser div s , n'oubliez pas d'ajouter des commentaires conditionnels pour IE .helper, .content { display: inline; zoom: 1; } , donc les blocs en ligne fonctionneraient pour les éléments de bloc.

12
répondu kizu 2011-08-31 15:02:21
la source

En plus des autres réponses ici, le CSS3 modèle de boîte flexible , entre autres choses, vous permettent d'atteindre cet objectif.

vous n'avez besoin que d'un seul élément de conteneur. Tout ce qui s'y trouve sera disposé selon les règles du modèle de boîte flexible.

<div class="container">
    <img src="/logo.png"/>
</div>

la CSS est assez simple, en fait:

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

j'ai omis vendor-prefixed rules pour la brièveté.

voici une démo dans laquelle l'img est toujours au centre de la page: http://jsfiddle.net/zn8bm /

notez que Flexbox est une nouvelle spécification et n'est actuellement implémentée que dans Safari, Chrome et Firefox 4+.

8
répondu Chris 2011-09-03 12:02:23
la source

je recommande cette solution par Bruno: http://www.brunildo.org/test/img_center.html

cependant, j'ai rencontré un problème avec sa solution w/ r/t webkit. Il semble que webkit rendait un petit espace au sommet du div si le span vide était autorisé à y être. Donc, pour ma solution j'ajoute seulement la portée vide si je détecte que le navigateur est IE (si quelqu'un trouve comment se débarrasser de l'espace, faites-le moi savoir!) Si, ma solution finit par être:


HTML:

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS:

.outerdiv {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.ie_vertical_align * {
    vertical-align: middle;
}
.ie_vertical_align span {
    display: inline-block;
    height: 150px;
    width: 0;
}

et si je détecte que le navigateur est IE j'ajoute un élément de portée vide avant la balise img et un style css donc il ressemble à:

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

voici un JSFiddle avec ce code.

4
répondu rcl 2011-08-30 05:22:37
la source

Dušan Janovský, développeur web tchèque, a publié une solution de cross-browser pour cela il ya quelque temps. Lire http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
répondu duri 2011-08-29 19:49:36
la source

si vous ne vous souciez pas de IE7 et en dessous, vous ne devez pas utiliser divs imbriqués multiples. Si vous avez une div que vous voulez aligner verticalement, cette div est dans un certain conteneur (même si le conteneur est votre <body> ). Par conséquent, vous pouvez spécifier display: table-cell et vertical-align: middle sur le conteneur, puis votre div sera centré verticalement.

cependant, si vous vous souciez de IE7 et ci-dessous, vous aurez besoin d'un conteneur supplémentaire pour le faire fonctionner (Oui, via un hack.)

regardez ce violon . Il s'affiche correctement dans IE6-9 et d'autres navigateurs importants. #container2 est présent uniquement pour IE7 et ci-dessous, donc si vous ne vous souciez pas d'eux, vous pouvez l'enlever ainsi que les styles conditionnels spécifiques à IE7.

1
répondu Artyom 2011-08-30 00:43:48
la source

définir l'image comme arrière-plan du div et aligner it center

0
répondu Benjamin Udink ten Cate 2011-09-02 01:49:29
la source

essayez les 50% de rembourrage truc:

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>
0
répondu RetroCoder 2011-09-02 03:48:51
la source

C'est possible si vous connaissez la hauteur de l'image ou de l'objet flash centrée. Vous n'avez pas besoin de connaître la hauteur/largeur du conteneur, mais vous avez besoin de connaître la hauteur/largeur contenue.

c'est possible en utilisant des marges flottantes, claires et négatives. Exemple: www.laurenackley.com page d'accueil.

html

<div id='container'><!-- container can be BODY -->
  <div id='vertical-center'>&nbsp;</div>
  <div id='contained-with-known-height'>
    <p>stuff</p>
  </div>  
</div>

css

#vertical-center{
  height:50%;
  width:1px;
  float:left;
  margin-bottom:-50px;/** 1/2 of inner div's known height **/
}

#contained-with-known-height{
  height:100px;
  clear:left;
  margin:0 auto;/** horizontal center **/
  width:700px;
  text-align:left;
}
#container{/** or body **/
  text-align:center;
  /** width and height unknown **/
}

Si vous ne connaissez pas les éléments intérieurs largeur/hauteur. Vous n'avez pas de chance avec <div> . Mais -- cellules de table ( <td> ) ne supportent vertical-align:middle; si vous ne pouvez pas le faire avec le truc de div ci-dessus, aller avec une table à l'intérieur du conteneur, et mettre le div que vous centrez à l'intérieur d'un td avec vertical-align middle.

-1
répondu tmsimont 2011-08-29 20:39:15
la source

Autres questions sur html css vertical-alignment