实现图片、多行文本垂直居中：display的table和table-cell搭配效果

最新推荐文章于 2024-02-02 15:59:51 发布

Amber.Li

最新推荐文章于 2024-02-02 15:59:51 发布

阅读量552

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43101443/article/details/88327363

display的table和table-cell搭配效果：文本\图片

display：table和table-cell是如何让多行文字在块内垂直居中？

多行文本的居中

网页中见过的案例效果：
在这里插入图片描述
HTML:

 <div class="parent">
        <p class="son">
        		冰爽饮品限时特惠
        </p>
    </div>

CSS:

.parent {
           display: table;     //容器变成块级表格元素
           width: 30px;
           height: 30px;
           text-align: center;
       }
       .son  {
           display: table-cell;    //对应子元素变成表格单元格
           height: 30px;
           vertical-align: middle;
       }

关键是将容器本身设置为display:table-cell 单元格。再附加两条属性即可。父级不设为dispaly:table 也能产生效果

			display: table-cell;
    		text-align: center;
    		vertical-align: middle;

------------------------分割线---------------------------------------------------分割线------------------------------------------------------------------------

图片img的垂直居中：

<style>
    	div{
    		display: table-cell;
    		text-align: center;
    		vertical-align: middle;
    		background-color: pink;
    		width: 500px;
    		height: 500px;
    	}
    	img{
    		width: 200px;
    		height: 200px;
    	}
    </style>
  <body>
  </head>

    <div id="app">
<!--     	<span>撒大苏打大大飒飒的嘻嘻嘻嘻嘻潇洒分歧分期撒旦撒撒旦撒旦撒大安德森</span>
 -->    	<img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg" alt="">
    </div>
    <!-- built files will be auto injected -->
  </body>

效果：
在这里插入图片描述