Comment centrer verticalement du texte dans un div, chevauchant un autre div

Question

J'ai un problème de CSS. Im essayant de centrer verticalement le texte dans un div, qui recouvre un autre div, mais le texte ne bougera pas.

EDIT: Voici Teh url jsFiddle: http://jsfiddle.net/wgSEw/3/

Le html est la suivante:

<div id="footer-top"> 
      <div id="footer-top-left"> 
       <div id="footer-logo"> 
      </div> 
      </div> 
      <div id="footer-top-transition"></div> 

     <div id="footer-top-right"></div> 
     <div id="footer-top-bullets"> 
      <div id="site-map" class="footer-bullet"> 
       <img src="<?php echo BASE_IMG_URL . 'bulletlight.png'; ?>" alt="some_text"> 
       <span class="footer-bullet-text">Site Map</span> 
      </div> 
      <div id="report-issue" class="footer-bullet"> 
       <img src=<?php echo BASE_IMG_URL . 'bulletlight.png'; ?> alt="some_text"> 
       <span class="footer-bullet-text">Report an Issue</span> 
      </div> 
      <div id="submit-professor" class="footer-bullet"> 
       <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text"> 
       <span class="footer-bullet-text">Submit Professor</span> 
      </div> 
      <div id="submit-school" class="footer-bullet"> 
       <img src=<?php echo BASE_IMG_URL . 'bulletblack.png'; ?> alt="some_text"> 
       <span class="footer-bullet-text">Submit a School</span> 
      </div> 
     </div> 
</div> 

et le css actuel est:

#footer-top{ 
    position: relative; 
    width: 960px; 
    height: 63px; 
    float: left; 
    background-image:url('midtilefooter.png'); 
} 

#footer-top-left{ 
    width: 466px; 
    height: 63px; 
    float: left; 
} 

#footer-logo{ 
    width: 265px; 
    height: 63px; 
    float: left; 
    background-image:url('leftlogo.png'); 
} 

#footer-top-transition{ 
    width: 27px; 
    height: 63px; 
    float: left; 
    background-image: url('midblacktransition.png'); 
} 

#footer-top-right{ 
    width: 467px; 
    height: 63px; 
    float: left; 
    background-color: black; 
} 

#footer-top-bullets{ 
    position: absolute; 
    float: left; 
    width: 960px; 
    height: 63px; 
    margin-left: 265px; 
} 

.footer-bullet{ 
    float: left; 
    height: 63px; 
    width: 173px; 
    color: white; 
} 

.footer-bullet-text{ 
    height: 63px; 
    color: white; 
    top: 50%; 
    margin-top: -31px; 
    vertical-align: middle; 
} 

Ce essentiellement, crée un fond de base pour la partie supérieure du pied de page, puis superpose une div de balles sur ce fond, de sorte qu'il se superpose sans obscurcir ou déconner avec l'arrière-plan. Les puces s'affichent aux endroits corrects et le texte est correctement placé horizontalement, mais je ne peux pas le placer au centre verticalement. Toute aide serait appréciée, ainsi que tout conseil général sur css, je suis assez nouveau pour ça, et ça me donne une course pour mon argent. Thansk beaucoup!

Answer 1

au centre, un div vertical

html

<div id="parent"> 
     <div id="child">Content here</div> 
    </div> 

option css 1

#parent {position: relative;} 

#child { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 30%; 
    width: 50%; 
    margin: -15% 0 0 -25%; 
} 

Nous commençons par le positionnement des deux divs parents et enfants. Ensuite, nous définissons les valeurs supérieures et inférieures de l'enfant à 50% chacune, ce qui correspond au centre du parent. Cependant, cela place le coin supérieur gauche à le centre de sorte que nous n'avons pas terminé.

Nous devons déplacer l'enfant vers le haut (de la moitié de sa hauteur) et vers la gauche (par la moitié de sa largeur) afin que son centre se trouve au centre de l'élément parent . C'est pourquoi nous avons besoin de connaître la hauteur (et ici la largeur ) de l'élément enfant. Pour cela, nous donnons à l'élément une marge supérieure et gauche négative égale à la moitié de sa hauteur et de sa largeur.

Contrairement aux 2 premières méthodes, celle-ci est destinée aux éléments de niveau bloc. Il fonctionne dans tous les navigateurs, mais le contenu peut dépasser son conteneur , auquel cas il disparaîtra visuellement. Cela fonctionnera mieux lorsque vous connaissez les hauteurs et les largeurs des éléments.

option css 2

#parent {position: relative;} 

#child { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 50%; 
    height: 30%; 
    margin: auto; 
} 

L'idée de cette méthode est d'essayer d'obtenir l'élément enfant à extensible à tous les 4 bords en définissant le haut, en bas, à droite, et à gauche Valeurs à 0. Parce que notre élément enfant est plus petit que nos éléments parents il ne peut pas atteindre tous les 4 bords.

La définition automatique de la marge sur les 4 côtés entraîne cependant l'égalité des marges et affiche notre div enfant au centre de la div parent .

Malheureusement, ce qui précède ne fonctionnera pas dans IE7 et ci-dessous et comme la méthode précédente le contenu dans le div enfant peut devenir trop grand le faisant être caché.

option css 3

#parent { 
    padding: 5% 0; 
} 

#child { 
    padding: 10% 0; 
} 

Dans le css ci-dessus, je me suis fixé rembourrages haut et en bas sur les deux éléments. Si vous le définissez sur l'enfant, vous vous assurez que le contenu de l'enfant sera centré verticalement et que le paramètre enfant est centré sur le parent. J'utilise des mesures relatives pour permettre à chaque div de croître dynamiquement. Si l'un des éléments ou son contenu doit être défini avec une mesure absolue , vous devrez faire quelques calculs pour vous assurer que les éléments s'additionnent. Par exemple, si le parent avait 400px de hauteur et l'enfant 100px en taille , nous aurions besoin de 150px de rembourrage à la fois sur le haut et le bas.

150 + 150 + 100 = 400

En utilisant% pourrait jeter des choses hors dans ce cas, à moins que nos valeurs% correspondaient exactement 150px.

Cette méthode fonctionne n'importe où. L'inconvénient est que selon les spécificités de votre projet, vous devrez peut-être faire un peu de maths. Toutefois, si vous êtes en ligne avec l'idée de développer des mises en page flexibles où vos mesures sont toutes relatives, vous pouvez éviter les maths.

Remarque: Cette méthode fonctionne en définissant des palettes sur les éléments extérieurs. Vous pouvez inverser les choses et définir à la place des marges égales sur les éléments internes. J'ai tendance à utiliser un rembourrage, mais j'ai aussi utilisé les marges avec succès. Quel vous choisissez dépendra des spécificités de votre projet.

source