CSS: taille fixe div, position verticale fixe et centré horizontalement?

En CSS, est-il possible d'avoir un <div> à la fois centré horizontalement et fixé au bas du navigateur? J'utilise une largeur et une hauteur définies pour la div interne.CSS: taille fixe div, position verticale fixe et centré horizontalement?

J'ai essayé de mettre un div avec position:relative à l'intérieur d'un div externe fixe, et cela aligne les choses verticalement, mais la div extérieure n'est pas centrée et je suis de retour à la case départ.

Est-ce encore possible de faire simplement en utilisant CSS? J'utilise aussi jQuery, donc j'utiliserais ça si c'est le seul moyen, mais je préfère le faire avec CSS si c'est possible.

Merci, dylan

Source

2010-02-14 Vagabond_King

figured it out.

HTML

<div id="background"> 
    <div id="content"> 
    </div> 
</div> 

div#background{ 
    height: 800px; 
    width: 100%; 
    position: fixed; 
    bottom: 0; 
} 

div#content{ 
    position: relative; 
    margin: 0 auto; 
    bottom:0; 
    height: 700px; 
    width: 800px; 
}

Réglage de la largeur div#background-100% permet encore d'utiliser le div#contentmargin:auto tout en ajustant dynamiquement la largeur de la fenêtre.

Source

2010-02-14 20:14:21

sa réponse, je ne peux pas encore toucher le bouton de réponse pour le moment. –

Comme div#content est largeur fixe, vous pourriez être en mesure de faire disparaître div#background:

div#content{ 
    position: fixed; 
    width: 800px; 
    height: 700px; 
    bottom: 0; 
    left: 50%; 
    margin-left: -350px; 
}

Bien sûr, si vous voulez un arrière-plan -width 100% là-bas, vous pourriez aussi bien coller avec votre méthode .

Source

2010-02-14 20:47:14

Je pense que vous cherchez quelque chose comme ceci:

body { 
 
    margin : 0; 
 
    font-family : Arial; 
 
} 
 

 
.main { 
 
    padding : 15px; 
 
} 
 

 
.footer-outer-container { 
 
    position : fixed; 
 
    display: table; 
 
    width: 100%; 
 
    height: 100px; 
 
    bottom: 0; 
 
    background: #ccc; 
 
} 
 

 
.footer-inner-container { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.footer { 
 
    display: inline-block; 
 
    background: #fff; 
 
    padding : 20px; 
 
    border : 1px solid #000; 
 
}

<div class="main"> 
 
    <p> 
 
    ZE er RE GTEG ERG Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    </p> 
 
    <p> eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG 
 
    </p> 
 
    <p> eGE ERg erg er 
 
    ZE er RE GTEG ERGERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG EG REG EG 
 
    </p> 
 
    <p> eGE ERg erg er 
 
    ZE er RE GTEG ERGERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE E GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G EgG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGERg erg erg er ERG ERG EG REG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G EgG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG EG ERG ERG<br/>RG ERGeGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    ZE er RE GTEGG EG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG g eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG E eGE ERg erg erg er ERG ERG Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG G Eg eGE ERg erg erg er ERG ERG REG EG ERG ERG<br/> 
 
    </p> 
 
</div> 
 
<div class="footer-outer-container"> 
 
    <div class="footer-inner-container"> 
 
    <div class="footer"> 
 
     Center this! 
 
    </div> 
 
    </div> 
 
</div>

Voir aussi this Fiddle!

Source

2016-01-21 01:57:16

CSS: taille fixe div, position verticale fixe et centré horizontalement?

Répondre

Questions connexes