保持文本对齐：左和中

Question

I have built the following page header which is vertically aligned to the center.

 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> 

I would like to align the <h1> text to the center, but maintain text-align: left , like so:

I know this is possible by adding:

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

However, the text is different on each page, so the width would need to be automatically detected. Is there a way to do this, preferably without Javascript?

EDIT : I'm looking for a solution that works in IE9+.

Answer 1

you can use flexbox for this, align-items to center vertically (the cross-axis) and justify-content to center along the line

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

UPDATE: For 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

Set the wrapping h1 to display:inline-block and center that with text-align:center on the parent div.

Then text-align:left on the inner span aligns the text as required.

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

Answer 4

You can do this more succinctly:

 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> 

Answer 5

使用跟随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}