CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法:
一、文本的水平垂直居中:
1、水平居中:
是不是很开心?超级简单的问题,一个text-align:center 就搞定了。过过过...
-------------------------------------下面看单行、多行文本的垂直居中-------------------------------------
2、垂直居中:
1)、单行文本
<!--只要height值等于line-height值就ok -- >
<div style="height:100px;line-height:100px;">
有且仅占有一行的情况下垂直居中
</div>
ps:height === line-height 无法使替换元素,如<img>、<input>、<areatext>、<select>...垂直居中,必须有<a>、<span>...类似行内标签配合才能使垂直居中生效! (下面的图片垂直居中解法5 会用到这个特性)
2)、多行文本
情况1:高度固定
关键属性:display:tabel-cell; vertical-align:middle;
<style>
div{height:300px;width:200px;vertical-align:middle;display:table-cell;word-break:break-all;background:#666;}
</style>
<div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
情况2:父级高度固定,嵌套行内元素
关键属性:父级:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;
<style>
div{height:300px;width:200px;display:table;word-break:break-all;background:#666;}
span{display:table-cell;vertical-align:middle;}
</style>
<div>
<span>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
</div>
情况3:父级高度固定,嵌套块级元素且该元素高确定
关键属性:定位 + margin-top:负值;
<style type="text/css">
*{margin:0;padding:0;}
div{height:300px;width:200px;position:relative;word-break:break-all;background:#666;}
p{position:absolute;top:50%;left:0;height:80px;margin-top:-40px;background:red;}
</style> <div>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</div>
情况4:父级高度固定,嵌套块级元素且该元素高不确定
关键属性:定位 + transform:translateY(-50%);
<style>
*{margin:0;padding:0;} /*不加的话会被p或其他标签默认样式影响*/
div{height:300px;width:200px;position:relative; word-break:break-all;background:#666;}
p{position:absolute;top:50%;left:0;transform:translateY(-50%);}/*个人建议,被包裹的块标签就不要height,用内容将高度撑开就好*/
</style> <div>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</div>
情况5:父子均 定宽 定高 (水平垂直居中)
关键属性:定位 + margin:auto;
<style>
*{margin:0;padding:0;}
div{height:300px;width:400px;position:relative;word-break:break-all;background:#666;}
p{position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;height:80px;width:200px;background:red;}
</style> <div>
<p>ddddddddddddddddddddddddddddddddddd</p> /*水平垂直居中*/
</div>
二、图片的水平垂直居中:
1、水平居中:
1)、给img设display:inline-block;然后父级text-align:center;
2)、给img设display:block; 同时设margin: 0 auto;
2、垂直居中:
解法1:img父级display:table-cell; vertical:middle; height:xxx; (推荐)
<style>
div{display: table-cell;width:400px;height:300px;vertical-align: middle;text-align:center;background:#999;} /*table-cell 可以使替换元素垂直居中,强大!*/
</style> <div>
<img src="/i/eg_tulip.jpg" width=150 height=150 alt="上海鲜花港 - 郁金香" />
</div>
解法2:定位 + transform: translate(-50%,-50%);
<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
</style> <div>
<img src="/i/eg_tulip.jpg" width=150 height=150 alt="上海鲜花港 - 郁金香" />
</div>
另:当已知图片大小时也可以把translate换成margin负值,这里不推荐使用。
解法3:定位 + margin:auto;
<style>
div{position:relative;width:400px;height:300px;text-align:center;background:#999;}
img{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style> <div>
<img src="/i/eg_tulip.jpg" width=150 height=150 alt="上海鲜花港 - 郁金香" />
</div>
</body
解法4:父级display:table; + 包裹img的元素(<span>)设为display:table-cell;
<style>
div{display:table;width:400px;height:300px;text-align:center;background:#999;}
span{display:table-cell;vertical-align:middle;}
</style> <div>
<span>
<img src="/i/eg_tulip.jpg" width=150 height=150 alt="上海鲜花港 - 郁金香" />
</span>
</div>
解法5:父级line-height == height + <img>vertical-align:middle (推荐)
<style>
img{border:0;}
div{width:500px;height:300px;line-height:300px;background:#999;text-align:center;}
img{vertical-align:middle;}
</style> <div>
<a>哪怕我里面有一个字符都行</a>
<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />
</div>
解法6:background实现
div{
width:500px;
height:300px;
background:#999 url(/i/eg_tulip.jpg) no-repeat center center;
} <div></div>
下面是图片垂直水平居中的效果:
介于pc端对flex布局的兼容有限,暂且不谈。
若发现错误之处,欢迎拍砖指正,真心感谢!_><_
CSS实现文字和图片的水平垂直居中的更多相关文章
- css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
- CSS元素(文本、图片)水平垂直居中方法
1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...
- css — 定位、背景图、水平垂直居中
目录 1. 定位 2. 背景图 3. 水平垂直居中 1. 定位 position:static | relative | absolute | fixed; static 静态定位 relative ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- CSS之常见布局|常用单位|水平垂直居中
常见布局: 1. 流式布局:百分比布局,宽高.margin.pinding都是百分比 2. 固定布局:盒子的宽高固定,如:margin.padding等 3. 浮动布局:float 4. 弹性布局:f ...
- 【css】常用的几种水平垂直居中方式与盒子模型,面试经常问到!
div水平垂直居中 假设结构为此,2个div嵌套 <div class="box"> <div class="content">< ...
- HTML中,大小不确定图片的水平垂直居中
html: css: div{ width:400px;height:300px;text-align:center;font-size:0;*font-size:200px;} div:after{ ...
- CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...
- 解读 CSS 布局之水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
随机推荐
- sass入门学习篇(二)
从语法开始但是语法也不是一两句的事情,首先看基本的导入,使用 一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,建议scss. 二,导入 使 ...
- PHP array_filter() 函数
定义和用法 array_filter() 函数用回调函数过滤数组中的元素,如果自定义过滤函数返回 true,则被操作的数组的当前值就会被包含在返回的结果数组中, 并将结果组成一个新的数组.如果原数组是 ...
- add,update,list.jsp源码
add:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncod ...
- 01背包Bone Collector
好几天没写博客了,整天忙着打比赛,希望能有参加省赛的资格,不容易啊. 今天复习背包,之前集训讲过,现在又忘了,昨天杭电校赛刚好有一题背包,居然不会做了,好尴尬,重新复习一下. https://vjud ...
- 573. Squirrel Simulation
Problem statement: There's a tree, a squirrel, and several nuts. Positions are represented by the ce ...
- Python学习之路-Day1-Python基础
学习python的过程: 在茫茫的编程语言中我选择了python,因为感觉python很强大,能用到很多领域.我自己也学过一些编程语言,比如:C,java,php,html,css等.但是我感觉自己都 ...
- mysql varchar类型转换int类型找出最大值
(1) 不严谨的,最简单的 select MAX(字段名 + 0) from 表名; (2) 使用函数实现 select MAX(cast(字段名 as SIGNED INTEGER)) from 表 ...
- JavaScript中的DOM函数与关键字汇总
DOM节点的属性 属性 描述 attributes数组 获取某个节点的所有属性子节点(实际是一个NodeList对象) childNodes数组 获取某个节点的所有子节点,可以按数组方式访问子节 ...
- Linux防火墙的关闭和开启
1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...
- Welcome to my Blog
Only English? Oh my god!!! why open live write can't write by Chinese?