88 votes

Contenu du centre CSS dans div

J'ai besoin de centrer le contenu html dans un div class="partners" (top div avec 2 images). Comme vous pouvez le voir sur l'image ci-dessous (il flotte à gauche au lieu du centre du div):

entrez la description de l'image ici

Voici mon code html :

 <div id="partners">
    <div class="wrap clearfix">
        <h2>Partnertnerzy serwisu:</h2>
        <ul>
            <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>    
            <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>    
        </ul>
        <a class="linkClose" href="stackoverflow.com/firmy?clbp=1">Zamknij </a>
    </div>
</div>

Image: entrez la description de l'image ici

CSS :

 #partners, #top {
    position: relative;
    z-index: 100;
}
#partners {
    margin: 12px 0 3px;
    text-align: center;
}
.clearfix:after, .row:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
#partners .wrap {
    width: 655px;
}
.wrap {
    margin: 0 auto;
    position: relative;
    width: 990px;
}
#partners h2 {
    color: #A6A5A5;
    float: left;
    font-weight: normal;
    margin: 2px 15px 0 0;
}
#partners ul {
    float: left;
}
ul {
    list-style-position: outside;
    list-style-type: none;
}

28voto

Dan Alboteanu Points 1570

Vous avez juste besoin

 .parent-div { text-align: center }

13voto

Mahendra Points 2298

Essayez d'utiliser flexbox. À titre d'exemple, le code suivant montre le CSS pour le conteneur div à l'intérieur duquel le contenu doit être centré et aligné :

Selon l'axe de la flexbox, vous devrez aligner ou justifier des éléments, en savoir plus sur MDN

 .absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
    justify-content: center;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X