关于文字超过一行时的布局

[jackPanyj]

关于文字超过一行时，经常会遇到以下两种布局

1. 文字一行时，水平居中显示，多行时左对齐。

2. 文字一行时，垂直居中左对齐显示，多行时仍然垂直居中左对齐显示。

对于第一种布局，如果兼容到android 4.4, 可以如下实现：

html 代码：

<div class="container">
  <h2>我是单行标题居中</h2>
  <h2>我是两行标题两行标题两行标题居左</h2>
</div>

css 代码：

.container{
	margin: auto;
	width: 320px;
	padding: 0 10px;
	background: #ddd;
}
h2{
	padding:10px 0;
	width: fit-content;
	margin: auto;
}

演示demo

如果兼容到 android4.0, 可以如下实现：

html 代码：

<div class="container">
  <h2><span>我是单行标题居中</span></h2>
  <h2><span>我是两行标题两行标题两行标题居左</span></h2>
</div>

css 代码：

.container{
  margin: auto;
  width: 320px;
  padding: 0 10px;
  background: #ddd;
}
h2{
  text-align: center;
  padding:10px 0;
  margin: auto;
}
h2 > span {
  text-align: left;
  display: inline-block;
}

演示demo

对于第二种布局，可以利用 table-cell 来解决， 但是由于个人感觉table布局用的比较少，

就使用了inline-block的布局方式实现

html 代码：

<div class="container">
 <span>我是两行标题两行标题两行标题居左</span>
</div>
<div class="container">
 <span>我是单行标题居中</span>
</div>

css 代码：

.container{
  background: #dedede;
  width:200px;
  height: 100px;
  padding:10px;
  line-height:100px;
  margin: auto;
}
.container > span{
  display: inline-block;
  line-height:20px;
  vertical-align: middle;
  color:#4B4B4B;
}

演示demo

两种布局还可以组合一下，组成单行水平垂直居中，多行垂直居中左对齐。有兴趣请自己尝试。