Pomoc w programowaniu, odpowiedzi na pytania / Html / Zachowaj wyrównanie tekstu: lewe i środkowe - html, css

Zachowaj wyrównanie tekstu: lewe i środkowe - html, css

Zbudowałem następujący nagłówek strony, który jest pionowo wyrównany do środka.

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>

Chciałbym dostosować <h1> tekst do centrum, ale utrzymuj text-align: left, jak na przykład:

Wiem, że jest to możliwe, dodając:

h1 {
margin: 0 auto;
width: 156px;
}

Jednak tekst jest inny na każdej stronie, więc width musiałby zostać automatycznie wykryty. Czy istnieje sposób, aby to zrobić, najlepiej bez JavaScript?

EDYTOWAĆ: Szukam rozwiązania działającego w IE9 +.

Odpowiedzi:

1 dla odpowiedzi № 1

możesz użyć flexbox dla tego, align-items do środka w pionie (oś poprzeczna) i justify-content aby wyśrodkować wzdłuż linii

.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>

AKTUALIZACJA: Dla 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 dla odpowiedzi nr 2

Ustaw zawijanie h1 do display:inline-block i centrum, z którym text-align:center na div rodzica.

Następnie text-align:left po wewnętrznej span wyrównuje tekst zgodnie z wymaganiami.

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 dla odpowiedzi nr 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 dla odpowiedzi nr 4

Możesz zrobić to w bardziej zwięzły sposób:

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 dla odpowiedzi № 5

Użyj następującego 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}