Aligner 3 DIV
florew
-
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 2829 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je lutte depuis plusieurs heures pour aligner 3 div placées dans un conteneur. J'ai essayé avec inline-block, float et table-cell mais je n'arrive pas a obtenir ce que je recherche, c-a-d les centrer horizontalement dans le conteneur (sans que les bords soient collés) et avec du texte centré verticalement et horizontalement dans chacune d'entres elles.
La largeur du conteneur est à 100% pour ccouper tout l'espace dispo (1500px).
Merci pour vos conseils ou idées,
Florew
et le CSS :
Je lutte depuis plusieurs heures pour aligner 3 div placées dans un conteneur. J'ai essayé avec inline-block, float et table-cell mais je n'arrive pas a obtenir ce que je recherche, c-a-d les centrer horizontalement dans le conteneur (sans que les bords soient collés) et avec du texte centré verticalement et horizontalement dans chacune d'entres elles.
La largeur du conteneur est à 100% pour ccouper tout l'espace dispo (1500px).
Merci pour vos conseils ou idées,
Florew
<div id="pres">
<div id="pres-1"><p>gauche</p></div>
<div id="pres-2"><p>center</p></div>
<div id="pres-3"><p>droite</p></div>
</div>
et le CSS :
#pres {
background-color: rgb(255, 255, 255);
width:100%;
height: 400px;
text-align: center;
display:table;
margin-top: 165px;
text-align: center;
}
#pres p {
font-size: 50px;
color: black;
line-height:70px;
text-align: center;
}
#pres-1 {
width:400px;
display: inline-block;
position: relative;
height: 300px;
background-color: #fafafa;
padding = 10px;
}
#pres-2 {
width:400px;
display: inline-block;
height: 300px;
position: relative;
background-color: #fafafa;
padding = 10px;
}
#pres-3 {
width:400px;
display: inline-block;
height: 300px;
position: relative;
background-color: #fafafa;
padding = 10px;
}
A voir également:
- Aligner des div horizontalement css
- Diviser une cellule excel en deux horizontalement ✓ - Forum Excel
- Diviser une case en deux dans excel - Forum Excel
- Diviser page word en 3 horizontalement - Forum Word
- Séparer une cellule en 2 ✓ - Forum LibreOffice / OpenOffice
- Aligner horizontalement css - Forum CSS
2 réponses
Tu as plus simple en utilisant une seule classe pour les 3 div
Le CSS
#page {
width:100%;
}
.pres {
width:33.33%;
height:100px;
display: inline-block;
margin-right: -0.25em;;
}
ou préférable
.pres {
width:33.33%;
height:100px;
float:left;
}
le html
<div id="page">
<div class="pres"></div>
<div class="pres"></div>
<div class="pres"></div>
</div>
donc le css devient plus simple apres dans les div press tu rajoutes les éléments que tu veux
Le CSS
#page {
width:100%;
}
.pres {
width:33.33%;
height:100px;
display: inline-block;
margin-right: -0.25em;;
}
ou préférable
.pres {
width:33.33%;
height:100px;
float:left;
}
le html
<div id="page">
<div class="pres"></div>
<div class="pres"></div>
<div class="pres"></div>
</div>
donc le css devient plus simple apres dans les div press tu rajoutes les éléments que tu veux
