让图片居中的css_css 图片居中

让图片居中的css_css 图片居中图片的居中显示css有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如一般设置图片属性​text-align:center​水平居中,但这个方法经常无效,很多前端工程师都有研究过或者说是搜索过CSS图片居中方法吧。但其实CSS图片居中有多种不同的情况,也有多种不同的解决方法,具体方法如下所示:图片居中又分为水平居中和垂直居中提示:在你开始阅读以下内容之前,你可以先了解CSS图…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

图片的居中显示 css 有很多方法,但在很多情况下有的方法无效,这是件很头疼的事情,比如

一般设置图片属性

​text-align:center

水平居中,但这个方法经常无效,很多前端工程师都有研究过或者说是搜索过

CSS 图片居中方法吧。

但其实CSS 图片居中有多种不同的情况,也有多种不同的解决方法,具体方法如下所示:

图片居中又分为水平居中和垂直居中

提示:在你开始阅读以下内容之前,你可以先了解CSS图片的基础内容。

一、水平居中:

1、单独文字垂直居中我们只需要设置 CSS 样式line-height属性即可。

2、文字与图片同排,在设置div高度同时再对此 CSS 样式的图片“img”样式设置​vertical-align:middle​垂直居中属性,如:​img{vertical-align:middle;}​ 。

3 不确定宽度的块级元素设置水平居中的方法

(1)是使用​table​ 作为容器的方法来实现。当然不大推荐使用这种方法,因为添加了无意义的标签。这里就稍微介绍一下吧。​Table​ 标签本身并不是块级元素,当我们不设置​table​的宽度的话,他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置​table​的宽度,直接设置​table​的外边距​margin:0 auto;​就可以实现水平居中了!这样我们就可以通过设置​table​水平居中,间接使里面的内容居中。

(2)相对于用​table​的方法的好处是不用增加无语义标签,简化标签嵌套深度。这个思路是这样的,通过改变块级元素的​display​属性值为​inline​类型,然后设置​text-align:center​来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后,行内元素比块元素少了一些功能。比如说设定长宽值等,在项目运用中可能会有一些限制,大家可以自行选择。

(3)通过给父元素设置浮动​float​,再设置父元素的​position​属性为​relative​和​left:50%;​子元素设置​position:relative​和​left:-50%​来实现水平居中。这个好处是可以保留块级元素仍然是以​display:block​的形式显示,不会添加无意义的标签,不添加嵌套深度。确点是设置了​position:relative;​带来了一些副作用。下面是第三种方法的实例代码,放到​body​标签里面就可以了。

二、垂直居中:

对这个CSS居中问题,我们可以使用设置背景图片的方法。举例:

body {BACKGROUND: url(”图片文件”) #FFF no-repeat center;}

关键就在于这个​center​属性,它表示让该背景图片在容器中居中。你也可以把​center​换成​top left​或者直接写上数字来调整它的位置。

方法一:

实例

div {

width:500px;

height:500px;

border:1px solid #666;

overflow:hidden;

position:relative;

display:table-cell;

text-align:center;

vertical-align:middle;}

尝试一下 »

方法二:

实例

div p {

position:static;

+position:absolute;

top:50%

}

img {

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle

}

尝试一下 »

方法三:

实例

img {

position:static;

+position:relative;

top:-50%;left:-50%;

vertical-align:middle; }

尝试一下 »

方法四:

实例

* {margin:0;padding:0;}

div {

width:500px;border:1px solid #666;

height:500px;

background:url(“/statics/images/w3c/intro.png”) center no-repeat;}

尝试一下 »

三、css图片居中用text-align:center无效怎么回事?

实例

div{

border:1px solid red;

margin:20px;

text-align:center;

}

尝试一下 »

四、如何让图片在DIV中水平和垂直两个方向都居中?

方法一:

思路:利用​text-align​属性将图片水平居中,然后设置​padding-top​的值使其垂直居中。

结构如下:

CSS样式如下:

div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

运行结果如下:

f55ebf3966d8512bb210339d3e708e5c.png

释义:

图片的尺寸为150x100px,DIV的大小为300x200px;

background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色,便于观察效果。

​text-align:center​,实现图片的水平居中;​padding-top:50px​,50px这个数值是经过计算得到的,​padding-top​的值具体算法如下:(DIV的高度 – 图片的高度)/2,但这里要注意,根据盒模型原理,我们还要将DIV原来的高度200减去​padding-top​的值,这样显示的才是正确的,否则DIV会变高。

方法二:

思路:只用​padding​属性,通过计算求得居中

结构代码同上;

CSS样式如下:

div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。

方法三:

思路:利用图片的​margin​属性将图片水平居中,利用DIV的​padding​属性将图片垂直居中。

结构代码同上;

CSS代码如下:

div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

img {display:block; margin:0 auto;}

备注:

​Img​是内联元素,要设置其​margin​属性使其居中,就要将其转换为块元素​display:block;​然后利用​margin:0 auto;​实现图片的水平居中;(有的设计师为图片再加个 div 标签,然后通过 div 标签的​margin​实现居中,也可以,不过,在结构中就又多了对 div,相对麻烦点)至于垂直居中的方法和前面的都一样,就不再重述。

以上方法都是有前提的,就是必须知道 DIV 与图片的尺寸,否则无法完成垂直居中的效果。

用一行css居中并裁剪图片的方法

设置图片的裁剪尺寸非常简单,你只需在 CSS 里使用这行代码:

img {

object-fit: cover;

}

就是这样。不需要语义、包装 div 或者其他没意义的代码。

这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 ​object-fit:cover​技术应用在这种图片上,并且设置好宽和高,图片自己就会进行裁剪和居中。

210313e641bb673b8afbfd74ac1133d2.png

​object-fit:cover​的裁剪方式和​background-size:cover​的完全相同,不过它是用来为 imgs、videos 和其他的媒体标签设置样式的,而不是给背景图片设置样式。

相当多的最新浏览器都支持 object-fit 技术,并且还有 polyfill 项目让你能在更老的浏览器(IE8+)里使用该技术。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207147.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Hadoop面试题[通俗易懂]

    Hadoop面试题[通俗易懂]文章目录你们公司集群有多少机器,内存,硬盘,CPU?你们Hadoop、Hive、Kafka都是什么版本?你们每天的数据量有多少?数据总量是多少?分布式和集群的区别?Hadoop1和Hadoop2的区别?Hadoop1Hadoop2NameNode运行处理什么是Hadoop?说一说Hadoop的shuffle过程?Hadoop中为什么需要排序?HDFS相关概念特点缺点BlockNameNodeDataNodeEditLogFSImageSecondaryNameNodefsimage和edits合

  • spring boot vue跨域_vue怎么解决跨域问题

    spring boot vue跨域_vue怎么解决跨域问题一、什么是跨域在springboot+vue前后端分离项目中,请求资源的端口号,域名(ip地址)不同。二、跨域的解决方案1、springboot后端处理:在每个controller上加上@CrossOrigin注解或在controller的基类上添加@CrossOrigin注解,其他controller类加上@Controller即可。2、在vue前端进行处理:通过代理的方式访问后端接口。…

  • Non-terminating decimal expansion; no exact representable decimal result.「建议收藏」

    BigDecimal调用divide()方法时报异常:Non-terminatingdecimalexpansion;noexactrepresentabledecimalresult

  • automatic是什么手表_浪琴automatic什么意思

    automatic是什么手表_浪琴automatic什么意思1.在本文中,提出了一种注释和检索图像的特征组合方法。除了使用原始图像中的低级颜色特征外,我们还提取了从卷积神经网络(CNN)中学习的特征。我们发现这两组在进行自动图像标注(AIA)时是相互补充的

  • 实用免费的SNMP网管工具-sugarnmsTool

    实用免费的SNMP网管工具-sugarnmsTool实用免费的SNMP网管工具SugarNMSTool是“北京智和信通技术有限公司”开发的图形化SNMP工具,可以免费使用。工具只有3M大小左右,便于携带,免安装,无数据库,可在Windows、Linux、Unix系统上快速运行。工具由大型SugarNMS智能网管软件的精华功能精简而成。SugarNMSTool是网管员、SNMP设备开发调试、SNMP诊断的日常必备工具。产品网站:www.zh

  • 头文件里面的ifndef /define/endif的作用

    c,c++里面,头文件里面的ifndef/define/endif的作用今天和宿舍同学讨论一个小程序,发现有点地方不大懂······是

    2021年12月25日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号