1109 votes

Comment centrer un élément absolu en div ?

<p>J’ai besoin de placer un <code></code> (avec <code></code> ) élément au centre de ma fenêtre. Mais j’ai des problèmes, ce faisant, car <strong>largeur est inconnu</strong><p>J’ai essayé ceci. Mais il a besoin d’être ajusté comme la largeur est recevable.</p><pre><code></code></pre><p>Toutes les idées ?</p></p>

1834voto

Matthias Weiler Points 5697
<p>Cela fonctionne pour moi :<pre><code></code></pre></p>

1354voto

bobince Points 270740
<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

795voto

Sumit Points 394

Voici une bonne solution si vous n'avez pas besoin à l'appui de IE8.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

L'idée est, qu' left: 50% est par rapport à la mère, tandis que l' translate transformer, c'est par rapport aux éléments de la largeur/hauteur.

De cette façon, vous avez parfaitement centré élément, avec un flexible de la largeur et de la mère, peuvent être aussi flexible que vous le souhaitez.

Vous pouvez également centrer verticalement avec cela (et encore une fois, la largeur et la hauteur de la mère et de l'enfant peut être totalement flexible (et inconnu)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

49voto

pratikabu Points 846
<p>Post vraiment sympa... Je voulais juste ajouter que si quelqu'un veut le faire avec la balise div unique puis ici le moyen de sortir :<p>Prendre <code></code> comme <code></code> .</p><pre><code></code></pre><p>Dans ce cas il faut connaître la <code></code> au préalable.</p></p>

36voto

IJas Points 2380
<p><strong>Centre absolu</strong><p><strong>HTML :</strong></p><pre><code></code></pre><p><strong>CSS :</strong></p><pre><code></code></pre><p><strong>Demo :</strong> <a href="http://jsbin.com/rexuk/2/" rel="nofollow">http://jsbin.com/rexuk/2/</a> </p><p>Testé dans Google Chrome, Firefox et IE8</p><p>Espérons que cette aide  :)</p></p>

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