web-dev-qa-db-fra.com

Un moyen facile de centrer les divisions de largeur variable en CSS

J'essaie de centrer une div qui aura une largeur variable (en fonction du contenu d'un site Web).

J'ai lu sur une technique de positionnement relatif ici:

http://www.tightcss.com/centering/center_variable_width.htm

Mais je pensais qu'il devait y avoir un moyen plus facile de le faire?

csscss-float
23
Talon

C'est une méthode assez solide qui devrait bien fonctionner dans la plupart des navigateurs. Ce n'est pas vraiment si complexe quand vous le décomposez. Voici un exemple de base:

<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>

<div id="hideoverflow">
    <div id="outer">
        <div id="inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel  augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo  libero, commodo ut iaculis in, placerat vel purus.
        </div>
    </div>
</div>
33
Joe Landsman

@Talon; vous pouvez le faire comme ceci http://jsfiddle.net/sandeep/7PXQF/

CSS:

.container{
background-color:red;
    text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}

HTML:

<div class="container">
    <div class="center">
      <p>This is a div with an much wider width, to make the yellow div go off the page to the right.  We'll type a bit more to be sure.</p>
      <p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
    </div>
  </div>
28
sandeep

Eh bien, il ne peut pas être plus simple que cela et a un support complet sur tous les navigateurs; n'a même pas besoin d'un conteneur:

.centered {
  display:table;
  margin:0 auto;
}

<div class="centered">
  content
</div>

Voici un violon qui fonctionne: https://jsfiddle.net/1tnprnoz/

1
scooterlord

Maintenant, avec flex-box, vous pouvez facilement y parvenir avec justify-content: center;.

#container{
  background: gray;
  display: flex;
  justify-content: center;
}
<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

Cela peut également être réalisé en appliquant margin: auto au sélecteur d'enfants de conteneurs #container>*.

#container{
  background: #c7c7c7;
}
#container>*{
  margin: auto;
}
<div id="container">
  <div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
    This is a centered div This is a centered div This is a centered div This is a centered div
  </div>
</div>

Remarque: content div est stylé en ligne car ces styles sont des styles générés et sortent du cadre de cette question.

0
Munim Munna