Aligner 3 DIV

[Fermé]
Signaler
-
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
-
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

Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
681
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
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 42854 internautes nous ont dit merci ce mois-ci


Tu dois définir le width de ton #press, ne pas mettre 100% mais une dimension définie comme 100px car 100% occupera toute la largeur de ta page.
Bonsoir Pito, je viens de réussir à avoir quelque chose de correcte avec ce code. J'ai mis 3 div qui occupent chacune 33.33% du container, et ensuite je replace 1 div dans chacune d'elles, avec des padding pour créér une marge. Pas facile d'alligner le texte cependant. Merci quand même pour ta réponse,

#pres{
width: 100%;
display: inline-block;
height:auto;
background-color: rgb(255, 255, 255);
}
.pres-1{
width:33.33%;
height: 100px;
float: left
}
.pres-2{
width:33.33%;
height: 100px;
float:left
}
.pres-3{
width:33.33%;
height: 100px;
float: right
}
#block-1, #block-2, #block-3 {
background-color: red;
margin: auto;
text-align: center;
vertical-align: center;
}