我有一个div,width:100px
并且height:100px
(说)里面有一个图像,高度始终固定为100px
。
我想使图像水平居中。
这里有3种情况:
margin: auto
在这里使用我希望图像的中心部分在div内可见。
意味着,如果image的宽度为120px
和div的宽度为,100px
并且overflow:hidden
我希望图像的第10 px至110
px可见(因此,left: 10px
和right: 10px
的图像隐藏在div下)
是否可以通过某些CSS属性实现?
(我不知道正在加载的图像的宽度!所以我希望它是动态的。也想避免使用JavaScript进行侧面计算,以找到多余的宽度并给margin- left:
-ve值bla bla。)
另外,我不能给出background-image
div 的图像!
参见:overflow:hidden
容易看到居中
这可能适用于所有浏览器,IE6可能除外。
对于.imageContainer > span
,margin-left
是从派生的width
,并且width
是任意数字,用于控制将支持的最大图像宽度。width: 10000px; margin-left:-4950px;
如果需要,您可以设置为支持非常宽的图像。
HTML:
<div class="imageContainer">
<span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>
CSS:
.imageContainer {
border: 1px solid #444;
overflow: hidden;
width: 100px;
height: 100px;
margin: 15px;
text-align: center;
}
.imageContainer > span {
display: block;
width: 1000px;
margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
display: inline-block;
}
问题内容: 我在div中垂直对齐图像时遇到问题 据我所知,我需要“显示:块;” 定位图像在中心,这是可行的。同样在教程中,我找到了很多答案,但它们并不是“有用的”,因为我的所有图像都不在同一高度! 问题答案: 如果容器中的高度固定,则可以将line-height设置为与高度相同,并且它将垂直居中。然后只需添加text-align使其水平居中即可。 编辑 您的代码应如下所示: 更新 现在是2016年
我想在没有javascript和背景图像的div中居中一个img。 下面是一些示例代码 我不知道img的大小,它应该能够超过父级的宽度 我不知道父div的宽度(它是100%) 父div具有固定高度 图像大于父图像,且父图像有溢出:隐藏 只需支持现代浏览器 期望的结果。(忽略不透明等,只需注意定位)。 我知道这可以很容易地完成与背景图像,但这不是一个选项,我。我也可以使用javascript,但这似
问题内容: 如何在容器中对齐图像? 例 在我的例子,我需要垂直居中的在用“: 的高度是固定的,图像的高度是未知的。如果这是唯一的解决方案,则可以添加新元素。我正在尝试在Internet Explorer 7和更高版本的WebKit,Gecko上执行此操作。 在这里查看jsfiddle 。 问题答案: 唯一的(和最好的跨浏览器)的方式,因为我知道是使用佣工,并在这两个元素。 因此,有一个解决方案:h
我有以下html(最小)模板: 仅使用css,我想将页面/屏幕中间的“顶部”div和“顶部”div下的“底部”div对齐,边距为顶部100px。我不能将顶部/底部以及主容器(“容器”)中的图像居中。 谢谢
问题内容: 我尝试将我的文本与其他文章和答案中的div底部对齐,以了解Stack Overflow中的其他问题,并学会了使用不同的CSS属性来处理此问题。但是我做不到。基本上我的HTML代码是这样的: 效果是,在FF中,我仅获得垂直线(div处于折叠状态),并将文本写在其旁边。如何防止折叠但宽度适合文本? 问题答案: 弹性解决方案 如果您想使用该解决方案,那将是非常好的。但是,除了破解之外,我们还
我正在以列表格式显示文本和图像,但我不能让它们完美地排列在中间,在一条直线上,我错过了什么 下面是我的布局代码