Comment faire pour centrer un div avec une largeur relative?

J'ai un <div> qui est conçu comme suit:

.content{
    width: 70%;
}

Pour centrer une div, il y a la possibilité de définir la marge de auto (margin: 0 auto;) mais cela ne fonctionne que si j'ai une taille fixe(par exemple 400px). Alors, comment puis-je centre mes div avec la largeur relative?

Il devrait fonctionner.. avez-vous même, essayez d'ajouter "margin: 0 auto;" le long avec une largeur en %??
text-align: center seul centre le texte dans le div, mais pas la div itsel
Pas besoin d'utiliser text-align-center... "margin: 0 auto;" lui-même devrait fonctionner..
Vérifiez pour voir si il y a des règles CSS substituant les marges ou les paramètres de largeur, vérifier aussi pour les flotteurs.
et si sa ne fonctionne pas ajouter votre code ou créer un Violon de votre code..

OriginalL'auteur Paedow | 2013-10-02

  1. 6

    margin: 0 auto travaillera également pour le pourcentage de divs. Les marges latérales sera calculée à partir du pourcentage de la largeur.

    http://jsfiddle.net/B32mh/

    Hum, c'est ennuyeux, Ça ne fonctionne toujours pas, j'ai aussi vérifié mon code html des balises manquantes ou quelque chose comme ça, mais tout va bien
    Désolé, mes divs bien, ma formation et rh s sont égarés.
    J'aime votre violon HTML. Juste <div>! Fait de moi lol :p

    OriginalL'auteur Explosion Pills

  2. 1

    à l'aide de

    <body>
  <div class="content">
    <div class="centered"><h1>Hello</h1></div>
  </div>
</body>

    et CSS

    .content {
  width: 70%;
  background-color: #e5e5e5;
}

.centered {
  width: 150px;
  background-color: #ccc;
  margin: 0 auto;
}

    vous obtenez ceci:

    Comment faire pour centrer un div avec une largeur relative?

    Démo sur JsBin: http://jsbin.com/iDAZeSi/1/

    édité à partir de répondre à

    juste ajouter margin: 0 auto; à .content de sorte qu'il ressemble

    .content {
  width: 70%;
  background-color: #e5e5e5;
  margin: 0 auto;
}

    et vous obtiendrez:

    Comment faire pour centrer un div avec une largeur relative?

    Démo sur JsBin: http://jsbin.com/iDAZeSi/2/

    Je veux centrer la div extérieure, et non pas son contenu
    ensuite, c'est exactement la même, en tant que largeur relative ou pas, c'est toujours valable largeur et pour la margin: 0 auto; fonctionne!

    OriginalL'auteur balexandre

  3. 1

    margin: 0 auto fonctionne aussi bien
    ou vous pouvez utiliser display: inline-block sur le contenu de la div et l'envelopper par des div avec text-align: center

    <div id="one">one</div>
<br /><br />
<div id="wrap">
    <div id="two">two</div>
</div>

    Css

    #one {
    width: 70%;
    height: 100px;
    background: #ccc;
    margin: 0 auto;
    text-align: center;
}

#wrap { text-align: center; }
#two {
    width: 70%;
    height: 100px;
    background: #ccc;
    display: inline-block;
    text-align: center;

}

    http://jsfiddle.net/4KhJL/3/

    OriginalL'auteur ghettovoice