Centrer le texte et les images dans un DIV, et plus

Question

Donc j'ai un couple de tag, et j'ai du texte et des images que je voudrais centrer ou aligner sur le fond à l'intérieur d'eux. Vertical-align ne semble pas être d'humeur à travailler. Je voudrais également faire un menu horizontal, qui aura une image de début (par exemple, menutop.png), un remplissage (menubg.png) et un bloc de fermeture (menubottom.png), et je voudrais Comme pour le bloc de fermeture du fond de se placer automatiquement à la fin du menu, peu importe combien de temps il se passe.

Merci!

Answer 1

Cela nécessite un positionnement absolu en CSS. Vous devez d'abord donner à la variable DIV une valeur de position (relative ou statique au moins). Puis, les images et le texte que vous souhaitez aligner vers le bas, vous devez faire la position: absolue, et en bas: 0px.

Le menu horizontal doit avoir une largeur de 100% (l'affichage: le bloc fonctionne également) et le bloc de fermeture placé à l'intérieur. Positionnez absolument le bloc de fermeture, et donnez-lui "right: 0" donc c'est toujours à droite.

Answer 2

Je résolus comme ceci:

<div id="menu"> 
<img src="img/menutop.png" /> 
    <div id="menucontent"> 
stuff goes here 
    </div> 
<img src="img/menubottom.png" /> 
</div> 

CSS:

#menu 
{ 
width: 335px; 
height: 100%; 
float: right; 
border:solid black 1px; 
} 
#menucontent 
{ 
background:url(img/menubg.png) repeat-y; 
width: 100%; 
} 

Merci pour les pointeurs bien :)

Answer 3

essayer avec l'élément que vous voulez centrer autre chose à l'intérieur:

div { 
    display: table-cell; 
    vertical-align: center; 
} 

(Je ne sais pas si cela fonctionne dans tous les navigateurs, mais je suis à peu près sûr que cela fonctionne dans Firefox et IE8 au moins)