我有一个div 200x200px。我想在div的中间放置一个50 x 50 px的图像。
怎样才能做到呢?
我能够得到它的中心水平使用文本对齐:中心的div。但垂直对齐是问题..
我将设置你的大div位置:相对;然后为你的形象这样做:
img.classname{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
}
这只是因为你知道图像和包含的div的尺寸。这也可以让你在包含的div中有其他项目…而使用行高之类的解决方案则不会。
编辑:注意…你的页边距是图像大小的负一半。
当然，另一种方法是使用valign创建一个表。不管你是否知道div的高度，这都可以工作。
<div>
<table width="100%" height="100%" align="center" valign="center">
<tr><td>
<img src="foo.jpg" alt="foo" />
</td></tr>
</table>
</div>
但只要可能，您应该始终坚持只使用CSS。
垂直对齐是最常被误用的css样式之一。对于不是td或css“display: table-cell”的元素，它不能像你期望的那样工作。
这是一篇关于这个问题的很好的文章。http://phrogz.net/CSS/vertical-align/index.html
实现你想要的目标最常见的方法是:
填充上/下 绝对位置 行高
就我个人而言，我会把它作为div的背景图像，CSS是这样的:
#demo {
background: url(bg_apple_little.gif) no-repeat center center;
height: 200px;
width: 200px;
}
(假设一个id="demo"的div，因为你已经指定了高度和宽度，添加背景应该不是问题)
让浏览器承担压力。
我有一个图片库，我不知道准确的高度或宽度的图像之前，我只知道他们是小于div，他们将被包含。
通过在容器上组合行高设置并在图像元素上使用vertical-align:middle，我最终使用以下HTML标记和以下CSS使其在FF 3.5、Safari 4.0和IE7.0上工作。
HTML标记
<div id="gallery">
<div class="painting">
<a href="Painting/Details/2">
<img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
</a>
</div>
<div class="painting">
...
</div>
...
</div>
CSS
div.painting
{
float:left;
height:138px; /* fixed dimensions */
width: 138px;
border: solid 1px white;
background-color:#F5F5F5;
line-height:138px;
text-align:center;
}
div.painting a img
{
border:none;
vertical-align:middle;
}
你可以用下面的代码水平和垂直地居中一个图像(在IE/FF中工作)。 它会将图像的上边缘放置在浏览器高度的50%，而margin-top(向上拉图像高度的一半)将完美地居中。
<style type="text/css">
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* for explorer only */
</style>
<body style="background-color:#eeeeee">
<div id="middle">
<div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
<img src="..." height="..." width="..." />
</div>
</div>
</body>
谢谢大家提供的线索。
我用了这个方法
div.image-thumbnail
{
width: 85px;
height: 85px;
line-height: 85px;
display: inline-block;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
}
这对我来说很管用:
<body>
<table id="table-foo">
<tr><td>
<img src="foo.png" />
</td></tr>
</table>
</body>
<style type="text/css">
html, body {
height: 100%;
}
#table-foo {
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#table-foo img {
display: block;
margin: 0 auto;
}
</style>
我发现Valamas和Lepu上面的答案是最直接的答案，处理未知大小的图像，或已知大小的图像，你宁愿不硬编码到你的CSS中。我只是做了一些小调整:删除不相关的样式，大小为200px以匹配问题，并添加max-height/max-width来处理可能过大的图像。
div.image-thumbnail
{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
div.image-thumbnail img
{
vertical-align: middle;
max-height: 200px;
max-width: 200px;
}
这是一种老式的解决方案，但浏览器市场份额已经足够大了，如果你不担心IE7的性能下降，你可能不需要IE黑客的部分。当你知道外部容器的尺寸，但可能知道也可能不知道内部图像的尺寸时，这种方法是有效的。
.parent {
display: table;
height: 200px; /* can be percentages, too, like 100% */
width: 200px; /* can be percentages, too, like 100% */
}
.child {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
}
<div class="parent">
<div class="child">
<img src="foo.png" alt="bar" />
</div>
</div>
这有点晚了，但这里有一个解决方案，我用垂直对齐元素在一个父div。
当您知道容器div的大小，但不知道包含的图像的大小时，这是有用的。(这是在使用灯箱或图像旋转木马时经常出现的情况)。
以下是你应该尝试的发型:
container div
{
display:table-cell;
vertical-align:middle;
height:200px;
width:200px;
}
img
{
/*Apply any styling here*/
}
适用于旧浏览器(IE >= 8)
绝对位置与自动边距相结合可以使元素水平和垂直居中。元素位置可以基于使用相对定位的父元素位置。查看结果
img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
这是另一种将所有内容居中的方法。
工作小提琴
HTML:(一如既往的简单)
<div class="Container">
<div class="Content"> /*this can be an img, span, or everything else*/
I'm the Content
</div>
</div>
CSS:
.Container
{
text-align: center;
}
.Container:before
{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Content
{
display: inline-block;
vertical-align: middle;
}
好处
容器和内容高度未知。
居中没有特定的负边距，没有设置行高(所以它适用于多行文本)，没有脚本，也适用于CSS过渡。
我有这个问题在HTML5中使用CSS3和我的图像在DIV中居中…哦，是的，我不能忘记我必须增加高度来显示图像…有一段时间我不知道它在哪里，直到我做了这个。我不认为位置和显示是必要的。
background-image: url('../Images/01.png');
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
这是正确的:
display: block;
margin-left: auto;
margin-right: auto
否则，如果上面只给你水平居中，试试这个:
.outerContainer {
position: relative;
}
.innerContainer {
width: 50px; //your image/element width here
height: 50px; //your image/element height here
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
另一种方法(此处未提及)是使用Flexbox。
只需在container div上设置以下规则:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
小提琴
div { 宽度:200 px; 身高:200 px; 边框:1px纯绿色; 显示:flex; justify-content:中心; /*对齐水平*/ 对齐项目:中心; /*垂直对齐*/ ｝ < div > < img src = " http://lorempixel.com/50/50/food " alt = " / > < / div >
要了解Flexbox的一些特性并获得最大限度的浏览器支持的语法，最好从flexyboxes开始
此外，现在的浏览器支持也相当不错:caniuse
对于显示:flex和align-items的跨浏览器兼容性，您可以使用以下命令:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
我喜欢跳老式马车!
以下是这个答案在2015年的更新。我开始使用CSS3 transform来做我的定位工作。这允许你不需要做任何额外的HTML，你不需要做数学(找到半宽的东西)，你可以在任何元素上使用它!
这里有一个例子(最后是小提琴)。HTML:
<div class="bigDiv">
<div class="smallDiv">
</div>
</div>
附带CSS:
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
我最近经常做的就是给我想居中的东西一个类然后每次都重用这个类。例如:
<div class="bigDiv">
<div class="smallDiv centerThis">
</div>
</div>
css
.bigDiv {
width:200px;
height:200px;
background-color:#efefef;
position:relative;
}
.smallDiv {
width:50px;
height:50px;
background-color:#cc0000;
}
.centerThis {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
通过这种方式，我将始终能够将容器中的内容居中。你只需要确保你想居中的东西是在一个定义了位置的容器中。
这是小提琴
BTW:这也适用于在较小的divs中居中更大的divs。
一个简单而优雅的解决方案，每次都适用于我:
<div>
<p style="text-align:center"><img>Image here</img></p>
</div>
你可以使用以下属性轻松做到这一点:
#内容{ 显示:flex; 对齐项目:中心; 宽度:200 px; 身高:200 px; 边框:1px纯红色; ｝ # myImage { 显示:块; 宽度:50 px; 高度:50 px; 保证金:汽车; 边框:1px纯黄色; ｝ < div id = "内容" > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div >
引用:W3
将图像垂直和水平居中的最好方法是使用两个容器，并应用以下属性:
外面的容器
应有显示:表;
内容器
应该有display: table-cell; 应该有垂直对齐:中间; 应该有text-align: center;
一个演示
.outer-container { display: table; width: 80%; /* can be any width */ height: 120px; /* can be any height */ background: #ccc; } .inner-container { display: table-cell; vertical-align: middle; text-align: center; } .inner-container img { background: #fff; padding : 10px; border : 1px solid #000; } <div class="outer-container"> <div class="inner-container"> <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" /> </div> </div>
使用定位。下面的方法对我很有效:
div{
display:block;
overflow:hidden;
width: 200px;
height: 200px;
position: relative;
}
div img{
width: 50px;
height: 50px;
top: 50%;
left: 50%;
bottom: 50%;
right: 50%;
position: absolute;
}
https://www.w3.org/Style/Examples/007/center.en.html
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
<IMG class="displayed" src="..." alt="...">
我一直在尝试用hmtl和css让图像在圆形内垂直和水平居中。
在结合了这篇文章中的几个观点后，我得出了以下结论:jsFiddle
下面是三列布局中的另一个示例:jsFiddle
CSS:
#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}
.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML:
<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
来，试试这个。
.parentdiv { 身高:400 px; 边框:2px实心#cccccc; 背景:# efefef; 位置:相对; ｝ .childcontainer { 位置:绝对的; 左:50%; 上图:50%; ｝ .childdiv { 宽度:150 px; 身高:150 px; 背景:lightgreen; 这个特性:50%; 边框:2px纯绿色; margin-top: -50%; margin-left: -50%; ｝ < div class = " parentdiv”> < div class = " childcontainer”> < div class = " childdiv”> < / div > < / div > < / div >
你可以设置图像的位置是对齐中心水平
#imageId {
display: block;
margin-left: auto;
margin-right:auto;
}
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
我们可以使用flex轻松实现这一点。不需要背景图片。
<！DOCTYPE html > < html > < >头 <时尚> # image-wrapper { 宽度:500 px; 身高:500 px; 边框:1px实体#333; 显示:flex; justify-content:中心; 对齐项目:中心; } > < /风格 > < /头 身体< > < div id = " image-wrapper " > <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png"> < / div > < /身体> < / html >
div { position: absolute; border: 3px solid green; width: 200px; height: 200px; } img { position: relative; border: 3px solid red; width: 50px; height: 50px; } .center { top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ } <div class="center"> <img class="center" src="http://placeholders.org/250/000/fff" /> </div>
相关:居中图像
使用Flexbox:
.outerDiv {
display: flex;
flex-direction: column;
justify-content: center; /* Centering y-axis */
align-items :center; /* Centering x-axis */
}
推荐文章
- 如何删除和清除所有的本地存储数据
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 在HTML中还有其他有用的空格码吗，比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- 如何以及在哪里使用::ng-deep?
- Angular 2模板中的标签是什么意思?
- 如何设置身体高度溢出滚动
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
