Comment horizontalement centre flottant élément d'une largeur variable?
comment centrer horizontalement un élément flottant d'une largeur variable?
modifier: j'ai déjà ce travail en utilisant un contenant div pour l'élément flottant et en spécifiant un width pour le conteneur (puis utiliser margin: 0 auto; pour le conteneur). Je voulais juste savoir si cela pouvait être fait sans utiliser un élément contenant ou du moins sans avoir à spécifier un width pour l'élément contenant.
7 réponses
en supposant que l'élément qui est flotté et sera centré est un div avec un id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
et appliquer le CSS suivant:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
voici un bon référence à ce sujet.
dites que vous avez un DIV vous voulez centré horizontalement:
<div id="foo">Lorem ipsum</div>
dans le CSS vous le stylisez avec ceci:
#foo
{
margin:0 auto;
width:30%;
}
qui indique que vous avez une marge supérieure et inférieure de zéro pixels, et à gauche ou à droite, automatiquement calculer combien il est nécessaire d'être pair.
n'a pas vraiment d'importance ce que vous mettez pour la largeur, tant qu'il est là et n'est pas 100%. Sinon vous ne seriez pas de réglage le centre de quoi que ce soit.
mais si vous le faites flotter, à gauche ou à droite, alors les paris sont éteints puisque cela le sort du flux normal d'éléments sur la page et le réglage de marge automatique ne fonctionnera pas.
vous pouvez utiliser fit-content valeur pour width .
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: cela ne fonctionne que dans les derniers navigateurs.
la réponse populaire ici ne fonctionne parfois, mais d'autres fois, il crée des barres de défilement horizontales qui sont difficiles à traiter - en particulier lorsqu'il s'agit de larges navigations horizontales et de grands menus tirer vers le bas. Voici encore plus léger version permet d'éviter ces cas limites:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
pour répondre plus spécifiquement à votre question, il est probablement pas possible de faire sans mettre en place un élément contenant, cependant il est très possible de faire sans spécifier une valeur de largeur. L'espoir qui sauve quelqu'un là-bas quelques maux de tête!
cela fonctionne mieux quand id = conteneur (qui est la div externe) et id = contenu (qui est la div interne). Le problème avec la solution fortement recommandée est qu'il résulte dans certains cas dans une barre de défilement horizontale lorsque le navigateur essaie de répondre à la gauche: -50% attribut. il y a une bonne référence pour cette solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}