保持文本对齐：左对齐和居中对齐

Question

我构建了以下页面标题，它与中心垂直对齐。

＆＃13;

＆＃13;

h1 span {
  display: block;
}
.parent {
  width: 300px;
  height: 400px;
  display: table;
  background: #ccc;
}
.center {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想将<h1>文字与中心对齐，但保留text-align: left，如下：

我知道这可以通过添加：

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

但是，每个页面上的文字都不同，因此需要自动检测width。有没有办法做到这一点，最好没有Javascript？

编辑：我正在寻找适用于IE9 +的解决方案。

Answer 1

您可以使用flexbox，align-items垂直居中（横轴），justify-content居中行

＆＃13;

＆＃13;

.parent {
  width: 300px;
  height: 400px;
  background: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
span {
  display: block
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：对于IE9 +：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将包裹h1设置为display:inline-block，并将text-align:center放在父div上。

然后内部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 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

你可以更简洁地做到这一点：

Windows.System.Launcher.LaunchUriAsync

header {
  width: 300px;
  height: 400px;
  background: #ccc;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
header h1 {
  display: inline-block;
  text-align: left;
}

Answer 5

使用follow css：

＆＃13;

＆＃13;

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}

＆＃13;

＆＃13;

＆＃13;