Je veux que DIV soit central horizontalement, le code CSS est-ce: et code html: p> Je pense qu'il y a Pas besoin d'expliquer mon code CSS, c'est presque auto-explicite, mais la DIV n'est pas centrale horizontalement, existe-t-il un moyen de faire cela?
Merci d'avance. P> p>
4 Réponses :
Mettez un autre div à l'intérieur avec une position relative, marge: auto. Donnez la largeur fixe à 100%.
Sinon, vous pouvez le pirater avec une marge négative 'Trick' P>
div { position: fixed; left: 50%; width: 500px; margin-left: -250px; }
Essayez ceci Le point à Soyez noté ici, le négatif margin-gauche code> d'une demi-valeur exactement de
largeur code> et définit le
gauche code> 50% du corps p> p>
Votre réponse et @ Gregbenner's sont tous deux utilisez ce «truc», tout d'abord, merci. Je viens de rechercher aussi Google et d'autres utilisent également de cette façon, je me demande s'il y a un pas ascendeur code> moyen de le faire?
C'est en fait une belle solution. Mais ce n'est pas exactement ce qu'il veut faire. De cette façon, le pied de page deviendra réagissant et ne sera pas une largeur fixe de 500px.
Ya @nick, mais j'ai aussi mentionné que l'astuce derrière elle. (s) Il peut facilement changer les dimensions comme (s) qu'il aime.
@Sachin Yep, tu as raison. Il n'y a probablement pas d'autre moyen que d'utiliser un tour comme celui-ci ou un conteneur div.
Alors @HIWAYCHE accepte la réponse que vous avez utilisée. Parce qu'il n'y a probablement pas de meilleures réponses à donner.
@NICK, OK, je préfère le conteneur à l'aide de DIV pour utiliser des trucs, mais si j'utilise le premier, je dois modifier trop de code HTML (ajouter un conteneur DIV), c'est trop horrible, je vais faire attention à cette question la prochaine fois. Après tout, tout le monde.
Au lieu de régler margin-gauche code>, nous pouvons également définir
transformer: translatex (-50%); code> de cette façon, nous n'avons pas besoin de calculer la moitié de la valeur à chaque fois que
Cela devrait bien fonctionner pour vous. Cela fonctionne en ajoutant un conteneur DIV.
<style> #footer-container{ position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; } #footer { width:500px; margin:0 auto; margin-bottom:20px; background-color:red; } </style> <div id="footer-container"> <div id="footer">hello world</div> </div>
le "text-alignement: centre;" provoquera le travail du texte et iE6. Si vous ne voulez pas centrer, mais comme si vous travaillez. Ajouter texte-align: laissé au #footer div.
Si vous travaillez avec des navigateurs modernes, vous pouvez utiliser le module de mise en page Flexbox: http://caniuse.com / # feat = flexbox .
flexbox Documentation: développeur.mozilla.org/en-us/docs/web/Guide/css/flexible_boxes jsfiddle . p> (en utilisant un
Remarque: ne peut pas publier plus de deux liaisons en raison de mon représentant. em> p>
pied de page code> tag au lieu d'un
Div # footer code> comme c'est plus simple.)
#footer-container {
bottom: 20px;
position: fixed;
display: flex;
justify-content: center;
width: 100%;
}
footer {
width: 500px;
background-color: red;
}
Cette solution fonctionne bien. Devrait vraiment avoir une façon de marquer des réponses comme «navigateurs modernes» afin que nous puissions les trier au sommet lorsqu'il ne supporte que les navigateurs modernes.
C'est génial, merci
Position: fixe et marge: auto; Ne travaillez pas bien ensemble, je travaille sur une solution pour vous.