Как сделать центр изображения (вертикально и горизонтально) внутри большего элемента - PullRequest
Новая
       59

Как сделать центр изображения (вертикально и горизонтально) внутри большего элемента

388 голосов
/ 23 декабря 2008

У меня есть div 200 x 200 px. Я хочу разместить изображение размером 50 x 50 px прямо в середине div.

Как это можно сделать?

Я могу расположить его по центру по горизонтали, используя text-align: center для div. Но вертикальное выравнивание является проблемой ..

Ответы [ 36 ]

11 голосов
/ 23 декабря 2008

в div 

style="text-align:center; line-height:200px"
11 голосов
/ 15 мая 2012

В CSS сделать это так: 

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}
9 голосов
/ 07 декабря 2015

@ sleepy Вы можете легко сделать это, используя следующие атрибуты: 

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}
<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

Рекомендации: W3

8 голосов
/ 23 декабря 2008

Обычно я устанавливаю line-height на 200 пикселей. Обычно делает трюк.

7 голосов
/ 24 сентября 2009

У меня есть галерея изображений, для которых я заранее не знаю точную высоту или ширину изображений, я просто знаю, что они меньше, чем div, в котором они будут содержаться.

Сделав комбинацию line-height настроек для контейнера и используя vertical-align: middle для элемента изображения, я наконец-то заставил его работать на FF 3.5, Safari 4.0 и IE7.0 с использованием следующей разметки HTML и следующего CSS.

HTML-разметка 

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

CSS 

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }
6 голосов
/ 14 января 2015

Другой способ (еще не упомянутый здесь) - это Flexbox .

Просто установите следующие правила для контейнера div: 

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FIDDLE 

div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div>
  <img src="http://lorempixel.com/50/50/food" alt="" />
</div>

Хорошее место, чтобы начать с Flexbox, чтобы увидеть некоторые его функции и получить синтаксис для максимальной поддержки браузера: flexyboxes

Кроме того, поддержка браузеров в настоящее время довольно хорошая: caniuse

Для кросс-браузерной совместимости для display: flex и align-items вы можете использовать следующее: 

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
6 голосов
/ 18 сентября 2011

Это работает для меня: 

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>
5 голосов
/ 11 августа 2017

Мы можем легко достичь этого, используя flex. нет необходимости в background-image. 

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>
5 голосов
/ 23 февраля 2012

Это старое решение , но доли рынка браузеров достаточно продвинулись, чтобы вы могли обойтись без взлома IE, если вы не обеспокоены ухудшением IE7. Это работает, когда вы знаете размеры внешнего контейнера, но можете знать или не знать размеры внутреннего изображения. 

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}

 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>
4 голосов
/ 08 апреля 2016

легко 

img {
    transform: translate(50%,50%);
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...