Besoin d'aligner le centre de l'image en CSS

J'essaye de centrer l'alignement (horizontalement et verticalement) de l'image dans une boîte div en html et css. Je ne suis pas en mesure de l'aligner au centre. Voici mon code ci-dessous.Besoin d'aligner le centre de l'image en 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>

L'image s'aligne en haut. J'ai essayé d'utiliser vertical-align: middle à l'intérieur de la balise img mais c'est inutile.

Quelqu'un peut-il m'aider? Merci.

Source

2010-03-03 bragboy

Lien vers le site Web plz :), alors je peux voir le prob. – Younes

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

fonctionne comme un charme

Source

2010-03-03 10:53:41 easwee

Impressionnant !!! Merci c'est exactement ce que je cherchais !! – bragboy

utilisation de l'alignement de texte: centre à aligner horizontalement ... pas d'étiquette css dans l'alignement vertical.

Source

2010-03-03 10:10:53 hallie

Il existe une propriété vertical-align. – easwee

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

Source

2010-03-03 10:13:19

J'ai essayé votre solution. Mais le rapport d'aspect est allé mal – bragboy

si vous voulez montrer à l'image dans le centre puis juste essayer ce

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

Source

2010-03-03 10:25:39

j'ai essayé ma propre solution en ajoutant display:table-cell et vertical-align:middle. Cela fonctionne bien dans FireFox. Mais lamentablement défaut dans 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>

Quelques indications nécessaires

Source

2010-03-03 10:38:25 bragboy

Vous devriez envisager d'utiliser le vertical-align:.. Et milieu le texte-aligner: centre pour ceci. Cela résoudra le problème que je devine

Source

2010-03-04 19:19:41

Entré dans this post et cela a fonctionné pour moi:

div{ 
    position: relative; 
} 

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

}

(vertical et l'alignement horizontal)

Source

2012-05-22 14:59:52

beaucoup mieux que la réponse acceptée! – Andreas

utiliser une combinaison de display: inline-block, text-align: center et vertical-align: middle pour centrer les deux dimensions:

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

Source

2012-06-20 17:10:35

essayer usin g ce style dans votre div qui contient l'image.

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

Source

2012-07-11 06:19:10 kanchan

Besoin d'aligner le centre de l'image en CSS

Répondre

Questions connexes