另一个div内的任意宽度的中心div
16lz
2021-01-22
Please help me center a div that does not have a predefined width, inside another div. Please see the code below (or on jsbin at http://jsbin.com/ufivif). Thanks.
请帮助我将一个没有预定义宽度的div放在另一个div中。请参阅下面的代码(或访问jsbin,网址为http://jsbin.com/ufivif)。谢谢。
EDIT: the problem is that I need the caption below the image to be aligned to the left edge of the image. So text-align: center
on the container does not work for me.
编辑:问题是我需要图像下方的标题与图像的左边缘对齐。因此text-align:容器中心对我不起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<style>
.container
{
border: 1px solid red;
padding: 5em;
position: relative;
}
.container img
{
border: 1px solid #333333;
padding: 1em;
}
.container .image
{
border: 1px solid green;
position: absolute;
left: 50%;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Telefunken_FuBK_test_pattern.svg/500px-Telefunken_FuBK_test_pattern.svg.png"/>
<div class="caption">test image</div>
</div>
</div>
</body>
</html>
5 个解决方案
#1
4
A combination of display: inline-block;
and text-align:center
显示组合:内联块;和text-align:center
http://jsbin.com/ufivif/5
body {
padding: 0;
margin: 0;
}
.container
{
border: 1px solid gold;
padding: 10px;
text-align: center;
}
.container .image
{
border: 1px solid silver;
padding: 10px;
display: inline-block;
text-align: left;
}
.container .image img
{
border: 1px solid #9C6963 ;
padding: 10px;
}
更多相关文章
- JavaScript作为内联块去间距的强大黑客
- AngularJS使用双向数据绑定将img元素标签中的图像显示为源?
- 图像未加载到HTML页面的jQuery load()中
- 为什么v-align中的将文本放在图像下面
- 如何将带有图形链接的列表转换为内联列表?
- 获取图像特定区域的所有多边形坐标?
- 如何在网站中找到未使用的图像和CSS样式?
- 如何在CSS中添加旋转图像?
- 如何在离子框架中显示图像标题?