首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么带有百分比的CSS对象位置不居中IMG

带有百分比的CSS对象位置不居中IMG的原因是因为百分比的定位是相对于父元素的尺寸进行计算的,而不是相对于元素自身的尺寸。对于图片(IMG)元素来说,它的父元素可能具有不同的尺寸,因此无法准确地确定百分比定位的居中位置。

要实现居中对齐图片,可以使用其他的CSS属性和技巧。以下是一些常用的方法:

  1. 使用flexbox布局:将父元素设置为display: flex,并使用justify-content和align-items属性来居中对齐图片。例如:
代码语言:txt
复制
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 使用绝对定位和负边距:将图片元素设置为绝对定位,并使用负边距将其居中对齐。例如:
代码语言:txt
复制
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  1. 使用表格布局:将父元素设置为display: table,并将子元素设置为display: table-cell,并使用vertical-align和text-align属性来居中对齐。例如:
代码语言:txt
复制
.parent {
  display: table;
  width: 100%;
}

.child {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

这些方法可以在不使用百分比定位的情况下实现图片的居中对齐。对于具体的应用场景和推荐的腾讯云产品,可以根据具体需求和情况选择适合的解决方案。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端学习(7)~css学习(一):字体属性和文本属性

) pc:皮卡Picas (1 皮卡 = 12 点) 相对单位 px:像素 em:印刷单位相当于12个点 %:百分比,相对周围文字大小 为什么说像素px是一个相对单位呢,这也很好理解。...上面这个小技巧,只适用于单行文本垂直居中,不适用于多行。如果想让多行文本垂直居中,还需要计算盒子padding。...overflow属性:超出范围内容要怎么处理 overflow属性属性值可以是: visible:默认值。多余内容剪切也添加滚动条,会全部显示出来。...hidden:不显示超过对象尺寸内容。 auto:如果内容超出,则不显示滚动条;如果内容超出,则显示滚动条。 scroll:Windows 平台下,无论内容是否超出,总是显示滚动条。...help :  带有问号标记箭头。用于标示有帮助信息存在。 no-drop :  IE6.0 带有一个被斜线贯穿圆圈手形光标。用于标示被拖起对象不允许在光标的当前位置被放下。

1.8K20

CSS第五天-定位

CSS第五天-定位 静态定位:static 定位默认值,写边偏移也不会有效果 ---- 相对定位:relative 父元素搭配子绝父相使用 根据自身原来位置,进行定位 没有脱标,在页面还占有位置...天生就是给绝对定位当爹用 ---- 绝对定位:absolute 根据最近带有定位(非静态)祖先元素来定位 子绝父相 脱离标准流,在页面不占有位置 绝对定位,固定定位,浮动,可以直接设置宽度和高度,默认宽度是内容宽度...display:none;(隐藏)、 display:block;(显示) visibility:hidden 隐藏元素本身,隐藏后元素还占有位置 display:none 隐藏元素本身,隐藏后元素不占有位置...设置vertical-align: middle ---- 垂直用法: 文本框和表单按钮无法对齐 input和img无法对齐 div中文本框,文本框无法贴顶问题 div设高度由img标签撑开,此时...img标签下面会存在额外间隙问题 使用line-height和vertical-align: middle 让img标签垂直居中问题 ---- 鼠标样式:cursor cursor: default;

2.7K40

利用vertical-align:middle实现在整个页面居中

{ border:0;width:700px;} 5 以上CSS里面值得一说恐怕就是为什么要用绝对定位(position:absolute)以及_height:100%这个样式了;我试了很多方法...先看一下W3C上对vertical-align定义:vertical-align 属性设置元素垂直对齐方式。该属性定义行内元素基线相对于该元素所在行基线垂直对齐。允许指定负长度值和百分比值。...专业语言我不会说,可以打个比喻:假设有两个行内元素a和b,a和b都是img,当a加了一个vertical-align:middle样式之后,b底部(基线)就会对齐a中间位置,如下图: ?...接下来回到这篇文章主题,现在我要让class="img404"img在class="wall"div里面垂直居中,我可以在div里面加一个span空标签,把它高度设为100%,再给它一个vertical-align...是为了让span左移一个像素,而令img在水平方向上回到正中位置;另外.wall里面的font-size:0正如我上一篇文章所说是为了消除代码换行所造成空隙。

1.4K10

关于 vertical-align 你应该知道一切

首先我们先讲一下,要实现垂直居中,我们为什么选择 vertical-align 这样一个不起眼 CSS 属性。...基线:书写英语字母时,字母 X 底部所在位置,可以了解下《字母’x’在 CSS 世界中角色和故事》(https://www.zhangxinxu.com/wordpress/2015/06/about-letter-x-of-css...对于内联元素指的是元素垂直中心点与行框盒子基线往上 1/2x-height 处对齐,简单点说就是字母 X 中心位置对齐;对于 table-cell 元素,指的是单元格填充盒子相对于外面的表格行居中对齐...如果绝对居中的话,两条线应该完全重合。 为什么会产生这种现象呢?主要原因在于文字具有下沉特性,从而导致蓝线无法绝对与红线对齐。当文字大小足够小时,我们可以忽略。从而近似的实现居中效果。...2、“空白节点” 可以受具有继承特性 CSS 属性影响,于是,我们可以通过其他东西来做调整,让字符中线和字符内容中心线在一起,或者说在一个位置上就可以了。

2.7K20

CSSvertical-align跟line-height相互作用

居然被大家一眼就看出来了,没错,就是“百分比值”。 vertical-align百分比值不是相对于字体大小或者其他什么属性计算,而是相对于line-height计算。...不过上面的效果并不是完全垂直居中,只是近似(稍微仔细看可以看出来)。为什么只是近似呢?...我特意把字符x使用大字号演示了下: 换句更简单的话说就是:middle中线位置(字符x中心)并不是字符内容绝对居中位置。两个位置偏差就是图片近似居中偏差。 ?...当然不是,“幽灵字符”可以受具有继承特性CSS属性影响,于是,我们可以通过其他东西来做调整,让字符中线和字符内容中心线在一起,或者说在一个位置上就可以了。有人可能要疑问了,这能行吗?...结果呢,两个却不在一个水平线上对齐,为什么呢?

86410

从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

2、为什么要初始化CSS呢? 为了考虑到浏览器兼容问题,其实不同浏览器对有些标签默认值是不同,如果没对CSS初始化往往会出现浏览器之间页面差异。...写过css都知道每个网页引进css首先都需要初始化,而出名css reset有YUI css reset(QQ、淘宝等都出现他影子),业内用最多还有Erik Meyer’s CSS Reset...(推荐使用,推荐使用display:inline-block;) 3、相对定位 position: relative; 特点: 1.使用相对定位,位置从自身出发。...3.元素使用固定定位之后,会转化为行内块(推荐,推荐使用display:inline-block;) 5、定位(脱标)盒子居中对齐 margin:0 auto; 只能让标准流盒子居中对齐 定位盒子居中...length: %: 使用 "line-height" 属性百分比值来排列此元素。允许使用负值。 inherit: 规定应该从父元素继承 vertical-align 属性值。 ?

1.2K30

web前端开发初学者十问集锦(2)

行内元素(如a标签),在文档流中时候因为是行内元素所以无法设置宽高;而当设置了绝对定位或者浮动,会生成块级框(即变成块级元素),所以就可以设置宽高了。 2.img标签是行内元素为什么可以设置宽高?...9.如何让浮动div水平居中? 元素垂直居中: 对于页面上块级元素,我发现设置CSS样式margin:auto 0;或者vertical-align:middle;都没有效果。...先计算自己内容高度,再计算容器高度,算出自己内容高度占整个容器高度百分比。100%减去自己内容高度百分比除以2得出百分比就是 margin-top:百分比数值。...(2)或者将当前浮动div定位方式设置为relative,absolute,然后使用top:n%方式。百分比计算方式如上。...当然,浮动元素垂直居中也可以使用此方法,缺点就是多增加了一个wrapper。 10.CSS绝对定位之后为什么以浏览器窗口作为父元素呢?

1.3K10

移动端重构实战系列1——基础知识

=1.0"> css3选择器 结构伪类选择器已经成为列表类标配了,掌握都不好意思切页面了。...伪元素 伪元素content使用 百分比 据说百分之八十的人入门移动端重构第一个问题就会问:是不是所有的当要用百分比单位啊。...这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度几种实现 新单位——rem,vw,vh... 接上第一个问题,第二个问题是:那是不是要用rem?...; top: 0; left: 0; width: 100%; height: 100%; } css中如何做到容器按比例缩放 居中 居中居中,还是居中,重要的话说三次...这里除了之前css2时代常规方法,我们更多使用css3transform及flex方法,而img或video最新object-position还得等待兼容时代 Centering in CSS

1.1K11

css布局 - 工作中常见两栏布局案例及分析

所以mainCont儿子mainCont-inner使用margin-left再向右移动回来。 main最外边元素cnblogs-body设置百分比宽度,并用margin实现水平居中。...样式关键点: main父元素负责整体水平居中。 nav负责左边元素左浮动+可展示宽度220px mainCont负责占据右边剩余位置,在这里具体做法是让其跟随左侧也形成浮动流。...样式关键点分析: main负责控制最大宽度和水平居中 main伪元素清除浮动 nav和cont都左浮动,并且使用百分比平分main空间。 css结构: ? 简陋样式: ?...内容区域设置了左浮动和自身视觉宽度上width值(也就是设计稿上多宽这里设置了多宽)不过我愚见,觉得这里可以设置浮动。反而设置上百分比宽度是为了自适应很有必要。 css代码: ?...六、icon + 文字 可以说是非常非常 常见、几乎100%设计稿必备结构了。 1、看个淘宝截图 ? 这种一般都是文字超过六个字,行数超过一行。

2.7K11

移动端重构实战系列1——基础知识

=1.0"> css3选择器 结构伪类选择器已经成为列表类标配了,掌握都不好意思切页面了。...伪元素 伪元素content使用 百分比 据说百分之八十的人入门移动端重构第一个问题就会问:是不是所有的当要用百分比单位啊。...这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度几种实现 新单位——rem,vw,vh... 接上第一个问题,第二个问题是:那是不是要用rem?...; top: 0; left: 0; width: 100%; height: 100%; } css中如何做到容器按比例缩放 居中 居中居中,还是居中,重要的话说三次...这里除了之前css2时代常规方法,我们更多使用css3transform及flex方法,而img或video最新object-position还得等待兼容时代 Centering in CSS

37710

网页元素居中n种方法

场景分析 一个元素,它有可能有背景,那我要它背景居中对齐 一个元素,它还有可能有个父级元素,那我要它居中于其父级元素 一个元素,它也有可能还带有一些子内容,我要让它子内容居中 场景建模 根据场景分析提出一些假设...一个是设置背景图片怎么铺宿主元素(默认是铺满)更美丽,另一个是设置背景图片相对于宿主元素位置,你可以传像素、百分比、相关方向单词(top、bottom、left、right)给它。...- image height) * (position y%) = (y offset value) 简言之,就是宿主元素宽高减去图片宽高乘以相关百分比就是相对于宿主元素左上角那个原点位置。...,为了矫正子元素偏移,我们其实还可以用css平移属性。...这个平移百分比是相对于其本身宽高,所以是向反方向50%。

92940

CSS概要

使用CSS样式一个好处是通过定义某个样式,可以让不同网页位置 文字有着统一字体、字号或者颜色等。... 百分比 p{font-size:12px;line-height:130%} CSS 选择器 在{}之前部分就是“选择器”,“选择器”指明了{}中“样式”作用对象,也就是“样式”作用于网页中哪些元素...元素高度、宽度、行高以及顶和底边距都可设置。 元素宽度在设置情况下,是它本身父容器100%(和父元素宽度一致),除非设定一个宽度。...由于视图本身是固定,它不会随浏览器窗口滚动条滚动而变化,除非你在屏幕中移动浏览器窗口屏幕 位置,或改变浏览器窗口显示大小,因此固定定位元素会始终位于浏览器窗口内视图某个位置,不会 受文档流动影响...CSS 设计技巧 • 水平居中设置-行内元素 通过给父元素设置 text-align:center 来实现 • 水平居中设置-定宽块状元素 通过设置“左右margin”值为“auto”来实现居中

1.4K50

网页设计基础知识汇总——超链接

格式:用文字作锚点格式是:字符串; 用图像作锚点格式是 : 超链接路径...设置边框宽度,以像素点为单位边框宽度,设置宽度默认值为0 ——取值为left、right、center,分别表示将表格在页面中相对位置 —— 设置表格单元格边框与其内部内容之间空间大小 —— 设置表格宽度、高度,单位用绝对像素值或窗口、总宽度百分比 属性:width:单元格宽度,单位用绝对像素值或总宽度百分比 colspan、rowspan:单元格跨占列数行数(缺省值为1)                   nowrap...可用作链接锚(link anchor),通过 JavaScript(HTML DOM)或通过 CSS带有指定 id 元素改变或添加样式。

3.3K30

5个好用 CSS 函数,快来试试手吧!

源码:https://codepen.io/protic_milos/pen/GRpYJKd calc() 这个函数使我们能够计算CSS值,而不是指定确切值。通常用于计算元素大小或位置。...*和/运算符有这限制,但出于一致性考虑,建议添加空格。 另外,很棒是,我们可以混合CSS单位,例如,我们可以减去百分比和像素。...我们可以用calc构建一个带有居中元素示例: Centered with calc css p.calc { padding: 10px; background-color...你可以指定它半径和位置。通常与图像一起使用来创建圆角形状。此函数是clip-path属性值。 另外,值得一提是,除了圆之外,您还可以创建椭圆和多边形形状。..." /> css img.circle { clip-path: circle(30%); } image.png 源码:https://codepen.io/protic_milos/pen/

44810

移动端重构实战系列1——基础知识

=1.0"> css3选择器 结构伪类选择器已经成为列表类标配了,掌握都不好意思切页面了。...伪元素 伪元素content使用 百分比 据说百分之八十的人入门移动端重构第一个问题就会问:是不是所有的当要用百分比单位啊。...这可以从侧面可以反应出百分比有多重要,下面是关于 关于移动端百分比宽度几种实现 新单位——rem,vw,vh... 接上第一个问题,第二个问题是:那是不是要用rem?...; top: 0; left: 0; width: 100%; height: 100%; } css中如何做到容器按比例缩放 居中 居中居中,还是居中,重要的话说三次...这里除了之前css2时代常规方法,我们更多使用css3transform及flex方法,而img或video最新object-position还得等待兼容时代 Centering in CSS

51131

超全整理前端开发面试题——CSS篇(2016年)

如何居中一个浮动元素?如何让绝对定位div居中?...relative 生成相对定位元素,相对于其正常位置进行定位。 static 默认值。...行框排列会受到中间空白(回车\空格)等影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔,把字符大小设为0,就没有空格了。 为什么要初始化CSS样式。...浏览器是怎样解析CSS选择器? 在网页中应该使用奇数还是偶数字体?为什么呢? margin和padding分别适合什么场景使用? 抽离样式模块怎么写,说出思路,有无实践经验?...[阿里航旅面试题] 元素竖向百分比设定是相对于容器高度吗? 全屏滚动原理是什么?用到了CSS那些属性? 什么是响应式设计?响应式设计基本原理是什么?如何兼容低版本IE?

2.6K130
领券