J'ai un menu les boîtes rectangulaires ont 90x50. Certains ont même texte en ligne, d'autres ont un texte multiligneAlignement du texte du bas ou menu
question: Comment aligner verticalement au fond avec css pur sans bidouille s'il vous plaît
L'alignement vertical en CSS n'est pas aussi simple que vous le pensiez intuitivement. Dans la mesure où la propriété directe vertical-align: bottom fonctionne uniquement dans les cellules de tableau. Voici une excellente ressource qui explique comment (pas) aligner verticalement en CSS: Understanding vertical-align, or "How (Not) To Vertically Center Content".
Dans un écrou: les travaux suivants en temps réel webbrowsers:
display: table-cell;
vertical-align: bottom;
Mais donc pas dans MSIE. Vous souhaitez que l'élément parent soit relatif et que le texte soit placé dans un élément absolument positionné, puis placez-le en bas. Voici un exemple de copy'n'paste'n'runnable.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
li {
position: relative;
width: 90px;
height: 50px;
border: 1px solid black;
}
li span {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<ul>
<li><span>text</span></li>
<li><span>text<br>multiline</span></li>
<li><span>text</span></li>
</ul>
</body>
</html>
très intéressant ... mais je l'ai trouvé: http: //www.trash- factor.com/content/vertical-align-text-inside-div-container-css qui montrent une solution peut-être mieux pour un MENU vie a href ... je vous le fais savoir! – menardmam
Je pense que la propriété vertical-align fait ce que vous voulez. Sinon, peut-être pourriez-vous clarifier votre problème?
Éditer: Vous pouvez forcer le comportement de type cellule pour n'importe quel autre élément en utilisant la propriété display avec la valeur 'cellule-cellule'. Je ne suis pas tout à fait sûr si cela fonctionne bien avec la propriété vertical-align, mais peut-être que vous pouvez en tirer parti. Si je me souviens bien, un élément intermédiaire supplémentaire était nécessaire.
Je sais, mais il est applique à la cellule de table ... j'aime texte dans un div – menardmam
un code aide toujours :) – Sotiris