需要居中对齐CSS中的图像

我想中心对齐（水平和垂直）在HTML和CSS的div框内的图像。我无法居中对齐它。这是我的下面的代码。需要居中对齐CSS中的图像

<div style="float:left;margin: 10px" > 
    <div style="border:1px solid gray;width: 60px;height: 60px;text-align:center;"> 
     <img style="max-height: 60px;max-width: 60px;" 
     src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/> 
    </div> 
</div>

图像越来越接近顶端。我尝试在img标签内使用vertical-align：middle，但它没用。

有人可以帮助我吗？谢谢。

来源

2010-03-03 bragboy

链接到网站PLZ :)，然后我可以看到概率。 – Younes 2010-03-03 10:02:39

<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div> 
<div>&nbsp;<img src="placeholder.gif" width="90" height="80" />&nbsp;</div> 
<div>&nbsp;<img src="placeholder.gif" width="70" height="120" />&nbsp;</div> 

div { 
    float: left; 
    text-align: center; 
    width: 150px; 
    height: 150px; 
    margin: 5px; 
    border: 1px solid #ccc; 
    font-size: 1em; 
    line-height: 148px; 
} 

div img { 
    margin-top: expression((150 - this.height)/2); 
} 

html>body div img { /*hidden from IE 5-6 */ 
    margin-top: 0; /* to clean up, just in case IE later supports valign! */ 
    vertical-align: middle; 
} 

Note: some <script> tag, either inline or external (can be a dummy one), is needed to get IE 5.0 on track.

http://snipplr.com/view/24428/center-an-image-inside-a-div-vertical-and-horizontal-without-knowing-the-images-size/

就像一个魅力

来源

2010-03-03 10:53:41 easwee

真棒！感谢那正是我正在寻找！ – bragboy 2010-03-03 11:02:25

use text-align：center to horizontal align ... no css tag in vertical align。

来源

2010-03-03 10:10:53 hallie

有一个垂直对齐属性。 – easwee 2010-03-03 10:24:38

<div style="float:left;margin: 10px; height: 199px; width: 242px;text-align:center; vertical-align:middle;" > 
     <div style="border:1px solid gray;width: 60px;height: 60px;"> 
      <img style="max-height: 60px;max-width: 60px; height: 58px; width: 47px;"    

       src="http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg"/> 

     </div> 
    </div>

来源

2010-03-03 10:13:19

我试过你的解决方案。但长宽比变差了 – bragboy 2010-03-03 10:31:23

，如果你想只显示中心的图像，然后只是尝试这个

<div style="background-position: center center; margin: 10px; text-align:center; background-image: url('http://t1.gstatic.com/images?q=tbn:UnPJn535Xfha7M:http://gizmodo.com/assets/resources/2007/07/ipod_6gen_1.jpg'); background-repeat: no-repeat;" 
      class="style1" > 

</div>

来源

2010-03-03 10:25:39

我想我自己的解决方案通过增加display:table-cell和vertical-align:middle。它在FireFox中工作正常。但惨遭失败，在IE :(

<div style="border:1px solid gray;width: 60px;height: 60px;display:table-cell; vertical-align:middle;text-align:center;"> 
    <img style="max-height: 60px;max-width: 60px; " src="http://www.google.com/intl/en_ALL/images/logo.gif"/> 
</div>

一些指针需要

来源

2010-03-03 10:38:25 bragboy

你应该考虑使用垂直对齐：。中和text-align：this。这将解决我猜的问题。

来源

2010-03-04 19:19:41

碰到this post和它的工作对我来说：

div{ 
    position: relative; 
} 

img { 
    position: absolute; 
    top: 0; bottom:0; left: 0; right:0; 
    margin: auto; 

}

（垂直和水平位置）

来源

2012-05-22 14:59:52

比公认的答案好得多！ – Andreas 2017-11-22 10:12:34

使用的display: inline-block，text-align: center和vertical-align: middle组合为中心的两个维度：

 <!doctype html> 
 
     <html lang="en"> 
 
     <head> 
 
     <style type="text/css"> 
 
     /* Use 100% height for html and body to provide context for vertical-align */ 
 
     html, body, .container, .placeholder { height: 100%; } 
 
      
 
     /*Set dimensions of image in CSS */ 
 
     img { width:16px; height:16px; } 
 
      
 
     /*Vertical centering for the necessary block boxes */ 
 
     .placeholder, .wrapper, .content { vertical-align: middle; } 
 
      
 
     /* Use inline-block for wrapper and placeholder */ 
 
     .placeholder, .wrapper { display: inline-block; } 
 
      
 
     /* Inline necessary to use text-align:center */ 
 
     .content { display:inline; } 
 
     
 
     /* Text align for horizontal centering */ 
 
     .container { text-align:center; } 
 
      
 
     /* Use width of less than 100% to avoid Firefox 3+ and Webkit wrapping issues */ 
 
     .wrapper { width: 99%; } 
 
      
 
     /* Media query for IE7 and under */   
 
     @media, 
 
      { 
 
      .wrapper { display:inline; } 
 
      } 
 
      </style> 
 
     
 
      <title>Vertical/Horizontal Centering Test</title> 
 
     </head> 
 
      
 
      <body> 
 
      
 
     <div class="container"> 
 
      <div class="content"> 
 
       <div class="wrapper"> 
 
        <img src="http://mozilla.com/favicon.ico" alt="test image"> 
 
       </div> 
 
      </div> 
 
      <span class="placeholder"></span> 
 
     </div> 
 
      </body> 
 
     </html>

来源

2012-06-20 17:10:35

尝试使用g在你的div中包含图像的这种风格。

<style="display: table-cell; 
vertical-align: middle;">

来源

2012-07-11 06:19:10 kanchan

需要居中对齐CSS中的图像

回答

相关问题