图片宽度大于父元素宽度时如何水平居中

1. 定位流:对图片进行定位

.img{
  position:absolute;
  left:50%;
  margin-left:-20px;/*值为图片宽度的一半*/
}

　这种方法不多说...但是这种方法有个弊端:就是必须知道图片的宽度;

2.重点来咯****奇淫技巧****

.img{
   margin:0 -100%;
}

注:此方法必须父元素必须设置 text-align:center;

时间： 2024-10-21 09:31:27

图片宽度大于父元素宽度时如何水平居中的相关文章

css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title&

图片宽度溢出父元素，居中

图片宽度不固定居中 (超出父元素宽度) 父元素 taxe-align:center: .img{ margin:0 -100%; } 原文地址:https://www.cnblogs.com/zzzzzwt/p/8119368.html

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装好布局的模板和控件,归根结底,还是那几个布局控件: Grid,StackPanel,Canvas,Pivot..... 所以,分歧就来了,对于追求视觉上冲击和美观的程序员来说,虽说要秉承微软的大块布局,内容为先的策略,但是依旧不喜欢微软的那些既定的模板,所以解决方案就有两个. 一:创建项目时依旧用那些

注意padding-top 百分比定义基于父元素宽度的百分比上内边距！！是基于宽度

定义和用法 padding-top 属性设置元素的上内边距(空间). 说明该属性设置元素上内边距的宽度.行内非替换元素上设置的上内边距不会影响行高计算,因此,如果一个元素既有内边距又有背景,从视觉上看可能延伸到其他行,有可能还会与其他内容重叠.不允许指定负内边距值. 注释:不允许使用负值. 默认值: 0 继承性: no 版本: CSS1 JavaScript 语法: object.style.paddingTop="10px" 可能的值值描述 length 规定以具体单位计的固定

CSS-父元素宽度自适应子元素宽度之和

最近碰见这样一个需求,要让图片横向排列设置x方向的滚动条滚动查看,原本当直接创建一个IFC(inline,float什么的)就解决了,搞了半天发现搞不定(IFC也是不能父元素宽度自适应子元素宽度之和的,因为会换行..),最后用flex解决了(然后又发现使用table也是可以的),然后学了两个新名词GFC和FFC..这里就说一下我的解决方法,给大家抛个砖. flex <style> /*1. 最外层容器 width: 200px; overflow-x: scroll; */ .img-view

任务三——左右定宽，中间一栏根据父元素宽度填充满

还有一个要求是“中间一栏长度改变时,父元素的高度始终为子元素中最高的高度”,这个之后总结,先分析布局. 看到这个任务,首先想到的就是双飞翼布局,之后有看其他人的代码,总结了一下: 一.position方式: 左.中.右顺序可以任意调整.左右设置绝对定位脱离文档流,再通过left.right.top 等属性进行定位,中间嵌套一个div,设置左右外边距分别为左右部分的宽度,使得中间部分的内容不会被左右遮盖. <style> *{ margin:0; padding:0; } .left,.rig

关于浮动撑开父元素宽度的兼容性问题

标准参考: 根据 CSS2.1 规范中的描述,浮动元素将尽可能的向左或向右浮动,直到该元素的外边界碰到其包含块的边界或另一个浮动元素的外边界. 换句话说,当浮动元素的包含块能够在横向完全容纳该元素时,该元素不会再继续撑大其包含块. 问题描述: 在 IE6 IE7 IE8(Q) 中,一个右浮动元素将尽可能的向右布局,并撑大其所有宽度为 'auto' 的祖先级元素的宽度,直到遇到一个明确设定了宽度的祖先级元素为止. 注:这种现象仅在该元素有宽度为 shrink-to-fit 的的祖先级元素时才可以看

ie7 父元素宽度自适应且为浮动的话子元素的宽度将不能按比例设置问题

好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: 解决方法: 1.给父元素添加固定的宽度: 如果方法一违背了想要的效果,那么只能采用js来处理,即获取h4的同级节点ul的宽度,然后将其赋给h4. 如下: <script>window.onload = function(){ if(navigator.appName == "Micros

当子元素需要相对父元素定位时，父元素无法被子元素撑大该怎么办

今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了: function psize(){ $("父元素").css('height',$("子元素").innerHeight()); } 上面是封装了一个函数,可以通过调用使用. height与innerHeight 的具体情况请看上一篇随笔.