Impossible de centrer ma div. sur le forum Création de sites web - 24-10-2020 22:31:50

Liste des sujets

Impossible de centrer ma div.

SchizoRigolo

Niveau 7

24 octobre 2020 à 22:31:50

Bonjour, je n'arrive pas à centrer un bouton, toute aide serait la bienvenue

CSS :

SpoilAfficherMasquer

@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

a
{
    text-decoration: none;
}

body 
{
    background-image: url("images/background.jpg");
    background-repeat:repeat;
    background-size: 100%;
    margin: auto;
}

header
{
    background-color: rgba(100,100,100,0.5);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal
{
    display: flex;
    flex-direction: column;
}

#logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding-left: 10%;
}

header h1
{
    font-family: 'Arial Black', Arial;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 10px;
    color: #FFFF;
}

nav ul
{
    list-style-type: none;
    display: flex;
}

nav li
{
    margin-right: 15px;
}

nav a
{
    font-family: 'dayrom';
    font-size: 1.3em;
    color: #FFFF;
    padding-bottom: 3px;
    text-decoration: none;
    margin-right : 20px;
}

nav a:hover
{
    color: black;
    background-color: #780dc4;
    padding: 10%;
}

a.bouton 
{
    padding: 10px 30px;
    background: #e414ff;
    color: #000000;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 1.5em;
}

a.bouton:hover 
{
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
    border: 2px solid #641a6e;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 1.5em;
}

.centrer 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

HTML :

SpoilAfficherMasquer

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>XWORLE | GAMING</title>
    </head>

    <body>
    	<div id="page"></div>
    	    <header>
    		    <div id="titre_principal">
                        <div id="logo">
                            <h1>XWORLE</h1>    
                        </div>
                    </div>
                
                    <nav>
                        <ul>
                            <li><a href="index.html">Accueil</a></li>
                            <li><a href="Prix.html">Prix</a></li>
                            <li><a href="Contact.html">Contact</a></li>
                        </ul>
                    </nav>
    	    </header>
    	    <div class="centrer">
                
    		    <a href="Prix.html" class="bouton">Je découvre les prix !</a>
            </div>
        </div>
    </body>
</html>

C'est un site pour m'entrainer, si j'arrive pas à centrer une div là dessus alors j'imagine pas le reste

Nuagedecube

Niveau 25

24 octobre 2020 à 22:57:23

le .bouton est déjà centré par .centrer.

SchizoRigolo

Niveau 7

24 octobre 2020 à 23:25:34

Le 24 octobre 2020 à 22:57:23 Nuagedecube a écrit :
le .bouton est déjà centré par .centrer.

je cherche à le mettre au milieu de la page, pas juste à le centrer comme en traitement de texte, mais bon pas grave, de toute façon avec le paragraphe pour décrire le site ça sert à rien de le mettre au milieu, mieux vaut le mettre sous mon texte

Nuagedecube

Niveau 25

24 octobre 2020 à 23:44:33

La réponse existe déjà dans ce forum https://www.jeuxvideo.com/forums/42-30-56723916-1-0-1-0-comment-centrer-verticalement-et-horizontalement-sa-page.htm

Marav

Niveau 50

25 octobre 2020 à 03:14:38

Le 24 octobre 2020 à 23:44:33 Nuagedecube a écrit :
La réponse existe déjà dans ce forum https://www.jeuxvideo.com/forums/42-30-56723916-1-0-1-0-comment-centrer-verticalement-et-horizontalement-sa-page.htm

Et sinon ça te coute quoi de l'aider ? Il nous fournie son code et utilise Flexbox.
Y a pas de LA réponse qui tienne quand on parle de CSS.

L'auteur il faut que tu spécifies avant toute chose la hauteur de ton body pour qu'il prenne toute la hauteur de ta page / de ton viewport.
Pour se faire il faut également spécifier la hauteur du bloc parent, qui est le bloc html, l'un de va pas sans l'autre.
En pratique :

html,
body 
{
    /*margin: auto;*/
    margin:0;
    height:100%;
}

J'ai viré ton margin:auto qui ne sert strictement à rien ici, et j'ai mis margin:0 qui permet d'enlever les marges ajoutées par défaut par les navigateurs, ce qui permet d'avoir un design qui épouse parfaitement les limites du viewport.
C'est visiblement ce que t'avais voulu reproduire avec ton margin:auto;

( Une solution plus moderne consisterait à utiliser height:100vh, les deux sont valables pour répondre simplement à ta question. )

Sache que ce genre de problématique peut être rapidement débuggée en utilisant tes outils de développement du navigateur de ton choix, à l'avenir tu pourras rapidement déceler le problème et centrer tes recherches

Ensuite deuxième point, sur ton bloc " centrer " il faut que tu lui spécifies une hauteur minimale tout naturellement, sinon il ne prendra que la hauteur de son contenus, et strictement pas un pixel de plus.
J'ai choisi arbitrairement de partir sur une solution à base de height: 100% ( height:100vh est valable aussi).

Sache que tu pourrais très bien utiliser encore plus flexbox ici en faisant un conteneur flexible et en utilisant flex-grow mais ça m'aurait obligé à repasser sur ton code html pour faire un conteneur (container) en bonne en due forme.

Et voilà le tour est joué, regarde bien désormais comment tes différents éléments se comportents via ton navigateur

Plus d'infos sur le comportement de la propriété height ici :

https://developer.mozillalla.org/fr/docs/Web/CSS/height

vh :

https://developer.mozilla.org/fr/docs/Apprendre/CSS/Building_blocks/Sizing_items_in_CSS

flex-grow:

https://developer.mozilla.org/fr/docs/Web/CSS/flex-grow

PS : Tu verras une scrollbar apparaitre si tu recopies mon code.
C'est tout à fait normal, vu que j'ai utilisé des tailles relatives au bloc parent, ta div centrer prend 100% de la hauteur du bloc parent, c'est à dire l’élément body, puisque tu as aussi une navigation, sa taille se rajoute aux 100% de la taille du body.
Le hack est de soustraire la taille de navigation sur les 100% pour tomber sur la taille voulue pile poil.
C'est pas le truc le plus noble, c'est pour ça que je préconise de refaire un conteneur propre avec ton HTML, je laisse le code ici quand même

centrer{
    height: calc(100% - 56px);
}

J'ai fait ça a la zeub vu que tu n'as pas précisé sa taille.

calc():

https://developer.mozilla.org/fr/docs/Web/CSS/calc

SpoilAfficherMasquer

J'aurais pu également pu utiliser ce code ci pour t'aider mais le message aurait été beaucoup trop long et dépasse un peu le cadre de ta question.

html {
    height: 100%;
}
body {
    min-height: 100%;
}

Bref ... y a pas de "LA solution" en CSS ...

SchizoRigolo

Niveau 7

25 octobre 2020 à 06:56:30

Merci Marav, topic résolu à 100%

Aide à l'achat Mac
Création de sites web
Internet
Macintosh
Création de Jeux
Linux
Programmation
Steam Deck
Hardware

La vidéo du moment

News culture

54 037 spectateurs

8 ans après l'incendie qui a fait 36 morts, ce studio japonais sort un anime en exclu sur Netflix

D'ores et déjà disponible sur la plate-forme Netflix, la série Éclats de Demain marque la première collaboration exclusive entre le géant du streaming et le prestigieux studio Kyoto Animation. Une œuvre unique qui sort du lot, autant par son approche narrative originale, que par l'incroyable force de résilience qui entoure sa création.

Toutes les news culture