9
votes

Comment faire du centre div horizontalement avec une position fixe?

Je veux que DIV soit central horizontalement, le code CSS est-ce: xxx

et code html: xxx

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.


1 commentaires

Position: fixe et marge: auto; Ne travaillez pas bien ensemble, je travaille sur une solution pour vous.


4 Réponses :


6
votes

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;
}


0 commentaires

20
votes

Essayez ceci xxx

JS Fiddle exemple

Le point à Soyez noté ici, le négatif margin-gauche d'une demi-valeur exactement de largeur et définit le gauche 50% du corps


7 commentaires

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 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 , nous pouvons également définir transformer: translatex (-50%); de cette façon, nous n'avons pas besoin de calculer la moitié de la valeur à chaque fois que



8
votes

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>


1 commentaires

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.



4
votes

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
Remarque: ne peut pas publier plus de deux liaisons en raison de mon représentant. em> p>


jsfiddle . p>

(en utilisant un 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;
}


2 commentaires

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