web-dev-qa-db-fra.com

Contenu du centre CSS dans div

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

enter image description here

Ceci est 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="/firmy?clbp=1">Zamknij </a>
    </div>
</div>

Image: enter image description here

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;
}
htmlcsscss3css-float
48
ShaneKm

Pour centrer une div, définissez sa largeur sur une valeur et ajoutez une marge: auto.

#partners .wrap {
    width: 655px;
    margin: auto;
}

EDIT, vous voulez centrer le contenu de la div, pas la div elle-même. Vous devez changer la propriété d'affichage de h2, ul et li à inline et supprimez le float: left.

#partners li, ul, h2 {
    display: inline;
    float: none;
}

Ensuite, ils seront disposés comme des éléments de texte normaux et alignés conformément à la propriété text-align de leur conteneur, qui correspond à vos souhaits.

67
socha23

Il y a plusieurs façons de centrer n'importe quel élément. J'en ai énuméré

  1. Définissez sa largeur sur une valeur et ajoutez une marge: 0 auto.
.partners {
    width: 80%;
    margin: 0 auto;
}
  1. Division en 3 colonnes
.partners {
    width: 80%;
    margin-left: 10%;
}
  1. Utilisez bootstrap layout
<div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4">Your Content / Image here</div>
</div>
13
Gnanasekar S

Vous avez juste besoin

.parent-div { text-align: center }
7
Dan Alboteanu

Essayez d'utiliser flexbox. A titre d'exemple, le code suivant montre la CSS pour la div de conteneur à l'intérieur de laquelle le contenu doit être centré:

.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;

}
3
Mahendra Liya

Le problème est que vous avez attribué une largeur fixe à votre DIV .wrap. La DIV elle-même est centrée (vous pouvez voir que lorsque vous ajoutez une bordure), mais la DIV est trop large. En d'autres termes, le contenu ne remplit pas toute la largeur de la DIV.

Pour résoudre le problème, vous devez vous assurer que le fichier .wrap est aussi large que son contenu.

Pour ce faire, vous devez supprimer les éléments flottants dans les éléments de contenu et définir la propriété display des éléments de niveaux de blocs sur inline:

#partners .wrap {
 display: inline;
} 

.wrap { margin: 0 auto; position: relative;}

#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}

#partners ul {
display: inline;
}

#partners li {display: inline}

ul { list-style-position: outside; list-style-type: none; }
3
joern

fait comme ça :

child{
    position:absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
2
AzizAhmad