img垂直对齐格div

我怎样才能在div div中对齐img而不使用margin-top大小？img垂直对齐格div

我改变显示器tablle细胞和垂直对齐：中间却不行 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>

来源

2014-01-18 Mohammad b

http://jsbin.com/uBeVEzO/1/edit一个小窍门，用'保证金：auto'。确保使顶部，底部，左侧和右侧0这个工作 – barrigaj

一个小技巧：自动居中对齐图像。

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

来源

2014-01-18 07:04:03 barrigaj

从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>

来源

2014-01-18 06:29:06 Anandu

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

试试这个。

来源

2014-01-18 06:30:18 chakri

添加align="center"

如：

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

来源

2014-01-18 06:42:26 anoymnous

尝试用保证金这一块

.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/

来源

2014-01-18 06:57:15 radha

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>

来源

2014-01-18 08:00:26 Rajnish

img垂直对齐格div

回答

相关问题