Question

如何在div中间对齐img而不使用margin-top尺寸？

我将显示更改为tablle-cell和vertical-align：中间但不起作用 DEMO

<div style="
  border: 1px solid rgba(83, 87, 91, 0.67);
  float: right;
  height: 39px;
  line-height: 39px;
  width: 15%;
">



 <img style="margin:auto;
display:block;" src=http://up.tractorfc.com/images/73529783235062014043.png />
  </diV>

Answer 1

尝试这个

.cont
    { 
  border: 1px solid rgba(83, 87, 91, 0.67);
  height:39px;
  width: 15%;
  display:table-cell;
  text-align:center;
  vertical-align:middle;
  }

http://jsfiddle.net/P3BVv/1/

Answer 2

带边距的小技巧：自动居中对齐图像。

HTML

<div>
  <img src=http://up.tractorfc.com/images/73529783235062014043.png />
</div>

CSS

div {
  position: relative;
  border: 1px solid rgba(83,87,91,0.67);
  height: 39px;
  width: 15%;
}
img {
  position: absolute;
  top:0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
}

这里的技巧是div和img的定位，img的顶部，底部，左侧，右侧和margin:auto。更改高度和宽度，看看它总是在中间

DEMO

Answer 3

从img中删除样式，并将文本对齐中心添加到div。

<div style="border: 1px solid rgba(83, 87, 91, 0.67);float: right;height: 39px;line-height: 39px;width: 15%;text-align:center;">
 <img src=http://up.tractorfc.com/images/73529783235062014043.png /></div>

Answer 4

<div align="center">
         <img src=http://up.tractorfc.com/images/73529783235062014043.png /> 
</div>

尝试这个。

Answer 5

添加align="center"

例如：

<div align="center">
<img src="path/here"/>
</div>

Answer 6

your query is below your code is not working:-

<div style="
border: 1px solid rgba(83, 87, 91, 0.67);
float: right;
height: 39px;
line-height: 39px;
width: 15%;
">



Just remove float left in your css attributes and just copy paste the code below,
if you also want to float right just make it another div and put float right on it 



now its working, try it :) :-

<div style="float:right">
<div style="border: 1px solid rgba(83, 87, 91, 0.67);
height: 39px;
line-height: 39px;
width: 15%;
text-align: center;
display: table-cell;
vertical-align: middle;"><div>
</div>

img垂直对齐div

6 个答案: