テキストの整列を維持する：左と中央

Question

私は中心に垂直に整列された次のページヘッダを構築しました。

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>

私はそうのように、中央に<h1>テキストを揃えるが、text-align: leftを維持したいと思います：

私は追加することによって、これが可能である知っている：

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

ただし、各ページでテキストが異なるため、widthを自動的に検出する必要があります。できればJavascriptを使わないでこれを行う方法はありますか？

EDIT：私はIE9 +で動作するソリューションを探しています。

Answer 1

あなたがラインに沿っ

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

を中心に上下方向（クロス軸）を中心に、このためflexbox、align-itemsを使用しjustify-contentできUPDATE：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>

Answer 2

使用CSSは、次のとおりです。親のdivのtext-align:centerとのことdisplay:inline-blockと中央へ折り返しh1を設定し

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}

Answer 3

を。

text-align:left（内側）spanは、必要に応じてテキストを整列します。

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>

Answer 4

HTML

<div class="parent"> 
    <div class="center"> 
    <header> 
     <h1> 
     <span>First line</span> 
     <span>Second line</span> 
     </h1> 
    </header> 
    </div> 
</div> 

あなたはこれより簡潔に行うことができます

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; 
} 

Answer 5

CSS：

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>