Centré img verticalement dans div autosize [Résolu/Fermé]

Signaler
Messages postés
148
Date d'inscription
mercredi 4 avril 2012
Statut
Membre
Dernière intervention
7 avril 2018
-
Messages postés
148
Date d'inscription
mercredi 4 avril 2012
Statut
Membre
Dernière intervention
7 avril 2018
-
Bonjour,

j ai un bandeau vertical en css, dans le bandeau "secondaire" j ai 3 images que j aimerai mettre au centre du bandeau verticalement et horizontalement, mon bandeau est en % et mes images aussi afin de s'adapter aux ecrans...

centré horizontalement c est bon et il prend pas le vertical

merci pour votre aide



page html

<div id="global">
<div id="entete">
<a href="index.php">Accueil</a>
<a href="presentation.php"><span class="espace2">Présentation</span></a>
<a href="reception.php"><span class="espace2">Salons de réception</span></a>
<a href="adresse.php"><span class="espace2">Adresse</span></a>
<a href="traiteur.php"><span class="espace2">Traiteur</span></a>
<a href="informations.php"><span class="espace2">Informations</span></a>
</div>

<div id="centre">
<div id="centre-bis">

<div id="navigation">
<a href="presentation.php?hide=15">Vidéo d'accueil<br></a>
<a href="presentation.php?hide=16">Galerie photos</a>
</div>
<div id="secondaire">
<p><img src="https://www.000webhost.com/migrate?static=true" />
<p><img src="https://www.000webhost.com/migrate?static=true" />
<p><img src="https://www.000webhost.com/migrate?static=true" />
</div>


<div id="principal">

<?php
if (isset($_GET['hide']) && $_GET['hide'] == 15) {
include 'video.php';
}
?>
<?php
if (isset($_GET['hide']) && $_GET['hide'] == 16) {
include 'photo.php';
}
?>
</div>
</div>
</div>

<div id="pied"> 2014 © Christophe Dradin. Proudly by Elipz
</div>
</div>

feuille css

.espace1{
margin-left:1em
}

.espace2{
margin-left:1.4em
}
.espace3{
margin-left:40em
}
.espace4{
margin-left:2em
}
/* Général */
body {
color: #F0E39E;
background: #EAECD6;
background-image:url(https://www.000webhost.com/migrate?static=true
background-repeat:no-repeat;
background-size: 20% 80%;

}
a {
color: #000000;
text-decoration: none;
}

/* Navigation */
#navigation {
color: #BECD32;
background: #62584F;
font-family: Gabriola;
font-size: 25px;
}

#navigation a {
color: #BECD32;
text-decoration: none;
}

/* Contenu principal */
#principal {
color: #62584F;
background: #EAECD6;
font-family: Gabriola;
font-size: 25px;
}

/* Contenu secondaire */
#secondaire {
color: #BECD32;
background: #62584F;
font-family: Gabriola;
font-size: 25px;
}

#secondaire p { //// ici
text-align: center;
text-align: middle;
}

#secondaire img {
width:50%;
height:20%;
}

/* Entete */
#entete {
color: #000000;
background: #BECD32;
font-family: Gabriola;
}

#navigation a {
color: #BECD32;
text-decoration: none;
}

/* Pied */
#pied {
color: #000000;
background: #BECD32;
font-family: Gabriola;
font-size: 2em;
}

#pied p {
text-align:middle;
}

#pied img {
width:25px;
height:25px;
position:auto;
}




/* --- POSITIONNEMENT --- */

/* Page */
body {
padding: 6% 15%;
}
#global {
width: 95%;
max-width: 90em;
min-width: 550px;
min-height: 300px;
margin-left: 1%;
margin-right: 15%;
}

/* En-tête */
#entete {
height: 2%;
padding-top: 0%;
padding-bottom: 3%;
padding-left:20px;
min-height:7px;
}


/* Bloc central */
#centre-bis {
width: 100%;
overflow: hidden;
}

/* Menu de navigation */
#navigation {
float: left;
width: 15%;
height: 80%;
padding-top: 2%;
padding-bottom: 1%;
padding-left: 2%;
padding-right: 1%;
min-height: 300px;

}

/* Contenu secondaire */
#secondaire {
float: right;
width: 18%;
height: 80%;
padding-top: 1%;
padding-bottom: 2%;
min-height: 300px;
}

/* Contenu principal */
#principal {
margin-left: 21%;
margin-right: 26%;
padding-top: 2%;
padding-bottom: 1%;
min-height: 300px;
}



/* Pied de page */
#pied {
height: 2%;
padding-top: 0%;
padding-bottom: 3%;
padding-left:5%;
min-height:7px;
}

2 réponses

Messages postés
148
Date d'inscription
mercredi 4 avril 2012
Statut
Membre
Dernière intervention
7 avril 2018

help svp
Messages postés
2829
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
11 novembre 2019
596
Salut
dans secondaire mets le meme padding en top et bottom.

fait aussi après #secondaire img

#secondaire img:first-child, #secondaire p:first-child {
margin-top:0;
padding-top:0;
}

#secondaire img:last-child, #secondaire p:last-child {
margin-bottom:0;
padding-bottom:0;
}



Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
Messages postés
148
Date d'inscription
mercredi 4 avril 2012
Statut
Membre
Dernière intervention
7 avril 2018

Super ça fonctionne...