J'ai essayé de trouver comment centrer le texte verticalement, mais je ne trouve pas de réponse satisfaisante. La meilleure réponse que j'ai trouvée jusqu'à présent est Ceci . Cela donne à cela que cela me permet de centrer le texte verticalement, mais si j'utilise cela et que j'ajoute plus de texte, il n'est étendu qu'au fond et ne pas être rentré, comme ce qui se passe horizontalement.
note, je ' m Recherche une solution CSS-seule, donc pas de JavaScript s'il vous plaît. Remarque, je veux pouvoir ajouter plusieurs lignes de texte. P>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div#maindiv {
width: 810px;
height: 99px;
background-color: black;
margin: 0px;
padding: 0px;
color: white;
font-family: Sans-serif;
}
div#maindiv span {
font-size: 1.1em;
}
div.part {
width: 262px;
height: 99px;
padding: 0px;
margin: 0px;
padding: 4px;
border: 0px;
color: white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
div.bgc1 {
background-color: #6DCAF2;
}
div.bgc2 {
background-color: #2A4B9A;
}
div.bgc3 {
background-color: #FF8A00;
}
</style>
<title>XHTML-Strict</title>
</head>
<div id="maindiv">
<body>
<div style="float: left;">
<div class="part bgc1">
<span>
Vegeta! What does the scouter say about his power level?!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc2">
<span>
It's over NINE THOUSAAAAAAAAAND!
</span>
</div>
</div>
<div style="float:left;">
<div class="part bgc3">
<span>
What NINE THOUSAND? There is no way that can be right!
</span>
</div>
</div>
</div>
</body>
</html>
4 Réponses :
Vous pouvez utiliser Par exemple, P> hauteur de ligne code> égal à celui de son conteneur parent. <div style="height:32px;>
<p style="line-height:32px;">Text</p>
</div>
Vous voulez expliquer les votes en panne? Si j'explique quelque chose de mal, n'hésitez pas à corriger.
Je n'ai pas répondu, mais OP a mentionné un problème survenu lors de l'ajout de texte (lu: Multiline) - et cela ne fonctionnera pas avec votre réponse ...
<div style="height:50px;line-height:50px;">
Text
</div>
Vous devez marquer votre code HTML comme code ou il ne sera pas affiché dans votre réponse.
Une réponse valide que j'accepte, mais il y a un problème: lorsque le texte commence à emballer horizontalement, cela "briser" dans quelque chose de laid avec une hauteur de ligne exagérée. L'OP devrait nous faire savoir: "Combien de texte" nous parlons. ;)
Habituellement, j'utilise cela pour les boutons et les divs avec une ligne de texte.
Eh bien, il existe plusieurs solutions.
Le plus facile est p> pour les multi-doublures, vous devez positionner une boîte à a-box-boîte et il y en a beaucoup plus; Tous fournissant des solutions individuelles à des cas individuels. Ceux-ci vous aideront à devenir un peu plus confiant (comme vous l'avez initialement indiqué que vous êtes nouveau à ce type de violon CSS). P> P>#parentbox
{
// We need the "parent" to have some kind of height
height: 20em;
// The most important... position children "relative" to the parent
position:relative;
}
.childbox
{
position: absolute;
left: 0;
top: 50%;
margin-top: -5em; // This pulls the child back "up" to the vertical center
}
em>
Vous pouvez définir votre conteneur sur http://jsfiddle.net/ptriek/h5j7b/1
(mais Internet Explorer 7 et ci-dessous ne l'aimera pas ...) Affichage: Cellule de table et Ajouter Vertical-Align: Moyen :
Outre les problèmes pré-IE8, cela ne fonctionne pas non plus sur les mobiles et les ordinateurs de poche. (Outre les victimes de la safari-navigateur, c'est-à-dire.) De plus, il ne comporte pas vraiment V-Centre du texte, il centre le conteneur enfant qui contient à nouveau du texte ... mais qui veut commencer à compter de compter des pois? ;) Super idée de toute façon ...
Pouvez-vous publier votre code actuel? La première question est toujours: "Qu'est-ce que tu veux le centre du texte?"
Il existe une variété de méthodes disponibles ici: VansoDesign.com/css/vertical-ceneringleightO/a > Si vous pouviez partager le code que vous utilisez, nous pouvons peut-être aider à une solution spécifique.
l'autre manière CSS est d'avoir le texte dans une cellule de table; Sinon, vous devrez utiliser JS
Y aura-t-il plusieurs lignes de texte?
C'est sérieusement la seule approche que vous avez trouvée? Cette question a été posée, sous diverses formes, encore et encore - surtout - principalement parce qu'il n'y a pas une solution satisfaisante pour toutes les circonstances. C'est sans aucun doute un effacement, mais une recherche Google de "CSS Vertical Center" présente un certain nombre d'options.
Pendant que vous tapez une question, la pile exemplaire montre que vous avez déjà posé des questions similaires et répondues sur le site. S'il vous plaît, regardez-les avant de poster une nouvelle question.
L'échantillon HTML n'est pas bien formé: est entré entre les tête et
corps . Et les balises finales pour le corps etdiv se chevauchent également.