Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage PHP CSS AMATEUR - Positionnement des div dans la div parent

CSS AMATEUR - Positionnement des div dans la div parent

1 réponse
Avatar
Broc_Ex_Co
[Je bidouille, et n'ai pas d'autres prétentions; pardon pour le caractère
trés basique de la question]

Je n'arrive plus à retrouver le code à indiquer, pour que les boites <Div>
se positionnement en haut de leur boite parent.
De même, pour qu'elles soient centrées horizontalement dans le parent.

Merci d'avance!
Signaler un problème avec ce contenu

1 réponse

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
SAM
Broc_Ex_Co a écrit :
[Je bidouille, et n'ai pas d'autres prétentions; pardon pour le caractère
trés basique de la question]

Je n'arrive plus à retrouver le code à indiquer, pour que les boites <Div>
se positionnement en haut de leur boite parent.
De même, pour qu'elles soient centrées horizontalement dans le parent.



Une boite "normale" se positionne toute seule en haut.
(du moins le premier enfant du parent)

Deux boites de largeur (et y compris les bords et marges) inférieure à
la 1/2 de la largeur libre de la boite contenante (largeur - bords -
padding) peuvent se succéder en haut, il faut alors qu"elles soient
flottantes.

<div style="position: relative">
<div style="width: 49%; float: left;"> 1 </div>
<div style="width: 49%; float: left;"> 2 </div>
</div>


Centrer 2 boites flottantes dans un conteneur : ce n'est pas prévu

Mais on doit pouvoir tricher :

<div style="position: relative">
<div style="width: 30%; float: left; margin-left: 20%"> 1 </div>
<div style="width: 30%; float: left;"> 2 </div>
</div>


Centrer 2 images côte à côte ce doit être possible :

<p style="text-align: center">
<img src=" ...
<img src=" ...
</p>


Le centrage horizontal ne pose aucun problème dès que les éléments à
centrer sont de type inline.

Exemple :

<html>
<style type="text/css">
ul { list-style: none; text-align: center; }
li { display: inline; margin: 0; padding: 0 }
ul li span { padding: 2px 14px; border: 1px solid; margin: 6px; }
</style>
<ul>
<li><span>exemple 1</span></li>
<li><span>exemple 2</span></li>
<li><span>exemple 3</span></li>
</ul>
</html>



Après il reste le positionnement en absolute.
(qu'il faut absolument éviter sauf si vraiment pas d'autre choix)



Quoi toi vouloir faire exactement ?


--
sm