Vertical align durée de texte à l'intérieur inline-block div
Je suis en construction d'un site web avec un design plat. J'ai un en-tête et sous elle, deux blocs de couleur à côté de l'autre. J'ai essayé de flotter à gauche et à droite, mais a été conseillé d'utiliser display: inline-block à la place.
J'ai rencontré un problème, cependant. Je veux mettre du texte à droite dans le milieu de la gauche et le bloc de droite et essayé d'utiliser le alignez-éléments: centre, mais pensé que ne fonctionne que si la div est mis à fléchir.
Donc ma question est, puis-je garder en quelque sorte mon inline-block et d'obtenir mon texte centré au milieu de mes blocs (à la fois horizontale et à la verticale)?
CSS:
body {
margin: 80px 0 0;
}
#pagewrapper {
width: 100%;
}
#header {
width: 100%;
height: 80px;
background-color: #008B8B;
position: fixed;
top: 0;
}
.content-left,
.content-right {
width: 50%;
height: 500px;
color: #FFFFFF;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.content-left {
background-color: #66CC99;
}
.content-right {
background-color: #20B2AA;
}
#header-bot {
height: 800px;
background-color: #F8F8FF;
}
#footer {
height: 50px;
background-color: #AFEEEE;
}
.title {
font-size: 18px;
}
HTML:
<body>
<div id="pagewrapper">
<div id="header">
</div>
<!-- End of Header -->
<div class="content-left">
<span class="title">This is left Content</span>
</div>
<!-- End of Content Left -->
<div class="content-right">
<span class="title">This is Right Content</span>
</div>
<!-- End of Content Right -->
<div id="header-bot">
</div>
<!-- End of Header-Bot -->
<div id="footer">
</div>
<!-- End of Footer -->
</div>
<!-- End of PageWrapper -->
</body>
Vous devez vous connecter pour publier un commentaire.
Tout en changeant le type d'affichage des colonnes à
table-cell
peut causer un problème (par exemple l'effet derelative
positionnement est pas défini pour la table-cell-éléments), une autre option est d'ajouter une pleine hauteur (pseudo-)de l'élément dans les colonnes et les aligner et les<span>
élément verticalement envertical-align: middle;
déclaration:EXEMPLE ICI
Pour plus de détails, vous pouvez consulter ma réponse ici.
:after
pseudo-élément. Ce qui n'est pas vraiment d'importance puisquetable-cell
s ne sont pas pris en charge dans IE6/7 trop.Sur votre .de contenu et de gauche .contenu-divs droit de changer l'affichage de la table et ajouter un texte-alignez le centre de l'. Pour la .titre regroupe, modifier l'affichage de table-cell et ajouter un vertical-align middle;
Voici un jsfiddle à démontrer (j'ai changé les divs pour avoir une hauteur de 200px de sorte qu'il est plus facile de voir l'effet de centrage dans la petite jsfiddle fenêtre)