Comment centrer horizontalement un élément flottant de largeur variable ?
Edit : J'ai déjà fait fonctionner ceci 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 se faire sans utiliser un élément contenant ou, du moins, sans avoir à spécifier un élément width pour l'élément contenant.
En supposant que l'élément qui est flottant et qui sera centré est un élément de type div avec un id="content" ...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>Et appliquez ce qui suit CSS :
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}Voici un bon référence à ce sujet.
Vous pouvez également essayer margin-left au lieu de left y position: relative . Margin-left a fonctionné pour moi sur l'élément -50%.
@marcusklaas, la valeur ajoutée est que cela peut fonctionner dans des cas où la solution affichée ne fonctionne pas, ou peut être plus facile à mettre en œuvre. Je ne me souviens pas de grand chose à ce sujet puisque c'était il y a un mois.
Cela fonctionne mieux lorsque l'id = conteneur (qui est la division externe) et l'id = contenu (qui est la division interne). Le problème avec la solution fortement recommandée est qu'elle entraîne dans certains cas une barre de défilement horizontale lorsque le navigateur essaie de prendre en compte l'attribut left : -50%. Il existe une bonne référence pour cette solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
La réponse populaire ici fonctionne parfois, mais d'autres fois, elle crée des barres de défilement horizontales qui sont difficiles à gérer, surtout lorsqu'il s'agit de navigations horizontales larges et de grands menus déroulants. Voici une version encore plus légère qui permet d'éviter ces cas limites :
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}Pour répondre plus précisément à votre question, il n'est probablement pas possible de le faire sans mettre en place un élément contenant, mais il est très possible de le faire sans spécifier une valeur de largeur. J'espère que cela évitera des maux de tête à quelqu'un d'autre !
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.
6 votes
Si tu veux le centrer, pourquoi est-il flottant ?
1 votes
C'est une longue histoire, je l'évoque pour d'autres raisons.
1 votes
Duplicata possible de Comment centrer les éléments flottants ?