Нужно по центру выровнять изображение в CSS - PullRequest
Новая
       10

Нужно по центру выровнять изображение в CSS

1 голос
/ 03 марта 2010

Я пытаюсь выровнять по центру (как по горизонтали, так и по вертикали) изображение внутри блока div в html и 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, но это бесполезно.

Ответы [ 9 ]

8 голосов
/ 22 мая 2012

Наткнулся на этот пост и у меня это сработало: 

div{
    position: relative;
}

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

}

(Вертикальное и горизонтальное выравнивание)

6 голосов
/ 03 марта 2010 
<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/

Работает как шарм.

2 голосов
/ 11 июля 2012

попробуйте использовать этот стиль в вашем div, который содержит изображение. 

<style="display: table-cell;
vertical-align: middle;">
1 голос
/ 04 марта 2010

Вы должны рассмотреть для этого использование вертикального выравнивания: среднего и выравнивания текста: центра. Думаю, это решит проблему.

1 голос
/ 03 марта 2010

Я попробовал собственное решение, добавив 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>

Требуются некоторые указатели.

1 голос
/ 03 марта 2010

, если вы хотите просто показать изображение в центре, просто попробуйте это 

 <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>
1 голос
/ 03 марта 2010 
 <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>
1 голос
/ 03 марта 2010

использовать выравнивание текста: по центру по горизонтали ... без тега css при вертикальном выравнивании.

0 голосов
/ 20 июня 2012

Используйте комбинацию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...