首页
学习
活动
专区
工具
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.9K20

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.5K10

    关于 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.8K20

    CSS中的vertical-align跟line-height相互作用

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

    88910

    从零开始学 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.3K30

    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.4K10

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

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

    1.2K11

    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.9K11

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

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

    39110

    CSS概要

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

    1.4K50

    网页元素居中的n种方法

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

    96340

    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/

    46310

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

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

    3.5K30

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

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

    53131
    领券