web-dev-qa-db-fra.com

Aligner les div à gauche, au centre et à droite au bas de la même ligne

J'ai trois divs que je voudrais afficher sur la même ligne. Chacune des trois a des largeurs et des hauteurs différentes, et elles ne sont pas du texte droit. J'aimerais en aligner un à gauche (tout à gauche), en aligner un autre à droite (tout à fait à droite) et centrer le troisième (au milieu du div contenant, toute la page dans ce cas ).

De plus, j'aimerais que les trois div soient alignés verticalement au bas de la div contenant. La solution que j'ai a verticalement les aligne au sommet de la div contenant.

Quelle est la meilleure façon de gérer cela?

csshtmlalignmentcentervertical-alignment
18
jrdioko

En définissant votre conteneur div à position:relative et les divs enfants à position:absolute, vous pouvez positionner les divs de manière absolue dans les limites du conteneur.

Cela facilite la tâche car vous pouvez utiliser bottom:0px pour tout aligner verticalement vers le bas du conteneur, puis utiliser le style gauche/droite pour vous positionner le long de l'axe horizontal.

J'ai mis en place un jsFiddle de travail: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ et le code qui suit:

HTML:

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS:

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Remarque: Pour le div "center", la marge gauche = 1/2 la largeur du div :)

J'espère que cela pourra aider :)

20
Damien-Wright

Ma technique est similaire à @ Damien-at-SF:

J'ai essayé de démontrer de manière rigoureuse toutes les exigences que vous aviez demandées.

démonstration en direct

HTML: 

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS: 

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}
4
thirtydot

Pour rendre votre centre div élastique, vous pouvez faire quelque chose comme:

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>
2
Babiker

Une amélioration supplémentaire à la première réponse:

Dans le CSS "center", vous devez ajouter:

text-align:center;

Dans le "bon" CSS div, vous devez ajouter:

text-align:right;

... pour réaliser parfaitement l'alignement gauche/centre/droite.

1
FoulFoot

Définissez position: relative sur le div contenant, définissez position: relative sur vos 3 divs et définissez l'attribut bottom des 3 divs sur 0:

bottom: 0
0
Satya