Aligner 3 DIV

Fermé
florew - 24 nov. 2013 à 20:14
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 25 nov. 2013 à 00:32
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

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

2 réponses

animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
25 nov. 2013 à 00:32
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
2