Comment centrer une division sur tous les moniteurs/résolutions/navigateurs?

J'ai créé ma propre boîte à lumière, le problème est qu'elle est centrée sur mon moniteur mais pas sur des moniteurs plus larges ou des résolutions plus grandes.Comment centrer une division sur tous les moniteurs/résolutions/navigateurs?

Quelle est la meilleure façon de centrer un div sur toutes les résolutions/moniteurs/navigateurs?

Source

2009-12-02 Sarfraz

Centré horizontalement, verticalement ou les deux? Si vous voulez les deux, this a travaillé pour moi dans le passé. Dans le cas contraire, la réponse sathish posted est bon pour le centrage horizontal ne

Source

2009-12-02 06:20:37

Essayez d'utiliser cette

Marque parent div style comme centre et utiliser margin: 0 auto; à l'enfant div

#parentDiv{ 
text-align: center; 
} 

#main{ 
margin:0 auto; 
width:755px; 
text-align: left; 
}

<div id="parentDiv"><div id="main">Content</div></div>

Source

2009-12-02 06:09:49 sathish

Les anciens hacks d'alignement de texte? Ne pouvons-nous pas abandonner IE <= 5.5 encore? – Quentin

si vous connaissez la largeur:

<div></div> 

div { 
    left: 50%; 
    margin-left: -50px; /* width/2 */ 
    width: 100px; 
}

Source

2009-12-02 09:09:03 FrankBr

Il s'agit d'une approche horrible qui mène au problème de l'affichage off-left-with-no-scrollbars. – Quentin

qu'est-ce que c'est? N'a jamais eu de problèmes avec ça :) – FrankBr

#center {position:absolute; width:400px; height:400px; left:50%; top:50%; margin:-200px /must be half of the height/ 0 0 -200px; /must be half of the width/}

qui centre le div horizontalement et verticalement. Par rapport à son premier parent avec la position: relative;

Source

2009-12-02 10:10:30 tbwcf

C'est une approche horrible qui mène au problème de l'absence de gauche-sans-défilement. – Quentin

bien si vous définissez tout pour être centré sur l'aide

*{margin:0 auto;}

il devra porter quoi que ce soit dans votre document, sauf avis contraire

ou vous pouvez utiliser un emballage div

div#wrapper {margin:0 auto;}

si votre en utilisant l'ancien navigateur, vous devez utiliser

div#wrapper {text-align:center;}

il y a comme 30 façons de le faire, dépend un peu de ce que vous faites ...

ce sont les plus faciles

Source

2009-12-02 16:47:19 Evilalan

définir une largeur sur la div puis lui donner une classe de centrage:

.center 
{ 
margin:0 auto; 
}

Il sera centré dans n'importe quel navigateur.

Source

2009-12-02 18:55:36 tahdhaze09

Bien que toutes les réponses ci-dessus semblent correctes je me suis coincé sur moi-même pour un moment. Voici mon approche simplifiée. Supposons que vous ayez le code ci-dessous et que vous souhaitiez centrer le contenu dans le conteneur 'storyline-div'.

<body> 
    <div class="storyline-container"> 
     <script src=storyline.js type="text/javascript"></script> 
    </div> 
</body>

écrit simplement le code ci-dessous ne fonctionnera pas parce que vous devez également Centrer la div parent qui dans ce cas est le « corps »

.storyline-container 
{ 
    text-align: center; 
}

Ajoutez le code ci-dessous dans votre fichier css pour résoudre votre problème.

body{ 
    text-align: center; 
}

Source

2016-12-28 23:50:43

Comment centrer une division sur tous les moniteurs/résolutions/navigateurs?

Répondre

Questions connexes