一行文字的时候，文字在整个盒子中垂直水平居中，超过一行之后，文字在盒子中垂直水平居中，文字左对齐...

在现实工作中，很多时候会有一些比较奇怪的需求，但即使是奇怪，但还是需要去实现。最近，在工作中，遇到一个需求，是这样的：

　　1、标题只有一行文字的时候，整个标题在一个div中需要垂直水平居中，文字也是居中对齐

      2、当标题超过一行的时候，那么标题在这个div中需要垂直水平居中，但是文字变成了左对齐

   根据如上描述，其实所用到的知识点也就那么几个:

      1、未知高度的盒子在已知宽高的盒子中垂直水平居中

      2、通过媒体查询或者js判断当文字的这个容器超过了一定的高度的时候，文字左对齐

   多行标题显示效果如下图所示：

  单行文字显示效果如下图所示：

 

 

   具体实现方法，我是这样来做的，代码如下：　　　　

　　<div class="box">
　　　　<div class="wrap">
　　　　　　<p class="text">
　　　　　　　　我是单行标题我是单行标题我是单行标题我是单行标题
　　　　　　　　我是单行标题我是单行标题我是单行标题我是单行标题
　　　　　　　　我是单行标题我是单行标题我是单行标题我是单行标题我是单行标题我是单行标题我是单行标题我是单行标题
　　　　　　</p>
　　　　</div>
　　</div>

　　页面结构由三个块元素嵌套组成，最外层的box的css属性要点在于display:table;overflow:hidden;子容器wrap的css属性要点在于 vertical-align:middle;display:table-cell;
      针对ie6的hack，wrap容器的 _position:absolute;_top:50%; 和text容器的 _position:relative; _top:-50%;
如果不需要水平居中的话，需要注释掉wrap容器的text-align:center;_left:50%;以及text的display:inline-block;_left:-50%;

<style>
*{margin: 0;padding: 0;}

.box{width: 300px;height: 300px;display:table; overflow:hidden;background-color:#000;  margin:0 auto; _position:relative;}

.wrap {vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%;}

.text{color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%;padding:0 20px;}

</style>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

js代码的话也就是做一下简单的判断就可以了，实现起来还是很简单的
<script>
$(function(){
　　var text = $('.text');
　　if(parseInt(text.css('height')) > 40){
　　　　text.css('text-align','left');
　　}
})
</script>

 

转载于:https://www.cnblogs.com/xiaofang-FE/p/6696325.html