CSS 如何让图片和文字垂直居中对齐? 下面本篇文章给大家介绍一下 CSS - 文字和图片在容器内垂直居中的简单方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法一, 使用 line-heigh 使多行文字居中或图片居中
把文字包裹在一个 inline-block 元素中 vertical-align middle, 外部元素 line-heigh 等于高度
- <div class="box1">
- <span > 多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行
居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中
- </span>
- </div>
- .box1{
- background-color: #ccc;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- line-height: 300px;
- }
- .box1 span{
- display: inline-block;
- line-height: 20px;
- vertical-align: middle;
- }
图片居中:
- <div class="box1">
- <img src="common-header-logo.png">
- </div>
- .box1{
- background-color: #ccc;
- width: 300px;
- height: 300px;
- margin: 100px auto;
- line-height: 300px;
- text-align: center;
- font-size: 0;
- }
- .box1 img{
- vertical-align: middle;
- }
效果:
方法二: 使用 flex 布局实现居中 (更简单, 不支持 IE9)
html 如下:
- <div class="box">
- <span>span 多行居中测试 < br>span 多行居中测试 < br>span 多行居中测试 </span>
- <p>p 另一个段落元素 </p>
- </div>
CSS 如下:
- .box{
- display: flex;
- width: 500px;
- height: 300px;
- margin: 50px auto;
- border: 2px solid #000;
- align-items: center;/* 副轴居中 */
- }
- .box span{/*span 是另一个 flex 布局容器, 它本身将自适应填满除 p 元素外的宽度 */
- flex: 1;
- display: flex;
- justify-content: center;/* 主轴居中 */
- }
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17529.html