Ich habe den folgenden Seitenkopf aufgebaut, der vertikal zur Mitte ausgerichtet ist.
h1 span {
display: block;
}
.parent {
width: 300px;
height: 400px;
display: table;
background: #ccc;
}
.center {
display: table-cell;
text-align: left;
vertical-align: middle;
}<div class="parent">
<div class="center">
<header>
<h1>
<span>First line</span>
<span>Second line</span>
</h1>
</header>
</div>
</div>Ich möchte das ausrichten <h1> Text in die Mitte, aber beibehalten text-align: left, so:
Ich weiß, dass dies möglich ist, indem Sie Folgendes hinzufügen:
h1 {
margin: 0 auto;
width: 156px;
}
Der Text ist jedoch auf jeder Seite unterschiedlich width müsste automatisch erkannt werden. Gibt es eine Möglichkeit, dies zu tun, vorzugsweise ohne Javascript?
BEARBEITEN: Ich suche eine Lösung, die in IE9 + funktioniert.
Antworten:
1 für die Antwort № 1Sie können verwenden flexbox dafür, align-items vertikal zentrieren (die Querachse) und justify-content entlang der Linie zentrieren
.parent {
width: 300px;
height: 400px;
background: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
span {
display: block
}<div class="parent">
<header>
<h1>
<span>First line</span>
<span>Second line</span>
</h1>
</header>
</div>AKTUALISIEREN: Für IE9 +:
.parent {
width: 300px;
height: 400px;
background: #ccc;
display: table;
text-align: center
}
h1 {
display: inline-block;
}
span {
display: block;
text-align:left
}
header {
vertical-align: middle;
display: table-cell
}<div class="parent">
<header>
<h1>
<span>First line</span>
<span>Second line</span>
</h1>
</header>
</div>1 für die Antwort № 2
Legen Sie die Verpackung fest h1 zu display:inline-block und zentrieren Sie das mit text-align:center auf dem übergeordneten div.
Dann text-align:left auf der Innenseite span richtet den Text nach Bedarf aus.
h1 span {
display: block;
text-align: left;
}
h1 {
display: inline-block;
}
.parent {
width: 300px;
height: 400px;
display: table;
background: #ccc;
text-align: center;
}
.center {
display: table-cell;
vertical-align: middle;
}<div class="parent">
<div class="center">
<header>
<h1>
<span>First line</span>
<span>Second line</span>
</h1>
</header>
</div>
</div>1 für die Antwort № 3
HTML
<div class="parent">
<div class="center">
<header>
<h1>
<span>First line</span>
<span>Second line</span>
</h1>
</header>
</div>
</div>
CSS
h1 span {
display: block;
}
.parent {
width: 300px;
height: 400px;
display: table;
background: #ccc;
}
.center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
h1{
display: inline-block;
text-align: left;
}
1 für die Antwort № 4
Das können Sie noch knapper machen:
header {
width: 300px;
height: 400px;
background: #ccc;
text-align: center;
display: table-cell;
vertical-align: middle;
}
header h1 {
display: inline-block;
text-align: left;
}<header>
<h1>
First line<br/>
Second line
</h1>
</header>0 für die Antwort № 5
Verwenden Sie folgendes css:
h1{position:relative; left:50%; transform:translateX(-50%) translateY(0); -o-transform:translateX(-50%) translateY(0); -webkit-transform:translateX(-50%) translateY(0); -o-transform:translateX(-50%) translateY(0); -ms-transform:translateX(-50%) translateY(0); -moz-transform:translateX(-50%) translateY(0); text-align:left}