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

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

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

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

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

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

Ответы [ 36 ]

3 голосов
/ 16 сентября 2016

Я пытался отцентрировать изображение по вертикали и горизонтали в форме круга, используя hmtl и css.

После объединения нескольких пунктов из этой темы вот что я придумал: jsFiddle

Вот еще один пример этого в макете с тремя столбцами: jsFiddle

CSS: 

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML: 

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
3 голосов
/ 29 апреля 2015

Я люблю прыгать на старых моделях!

Вот обновление 2015 года к этому ответу . Я начал использовать CSS3 transform, чтобы сделать свою грязную работу по позиционированию. Это позволяет вам не создавать лишний HTML, вам не нужно выполнять математику (находить полуширины), вы можете использовать его для любого элемента!

Вот пример (с скрипкой в ​​конце). Ваш HTML: 

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

С сопровождающим CSS: 

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

В эти дни я часто делаю уроки по вещам, которые я хочу сосредоточить, и просто повторяю их каждый раз. Например: 

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

1017 * CSS * 

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

Таким образом, я всегда смогу центрировать что-то в его контейнере. Вам просто нужно убедиться, что объект, который вы хотите центрировать, находится в контейнере, для которого определено position.

Вот скрипка

КСТАТИ: Это работает для центрирования БОЛЬШИХ div'ов внутри МАЛЫХ divов.

3 голосов
/ 23 февраля 2011

Вы можете центрировать изображение по горизонтали и вертикали с помощью приведенного ниже кода (работает в IE / FF). Он поместит верхний край изображения точно на 50% высоты браузера, а поле margin-top (потянув на половину высоты изображения вверх) идеально отцентрирует его. 

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>
2 голосов
/ 17 ноября 2016

Вы можете установить положение изображения по центру по горизонтали этим 

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}
1 голос
/ 27 июля 2011

спасибо всем за подсказки.

Я использовал этот метод 

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}
1 голос
/ 24 марта 2016

Используйте позиционирование. У меня сработало следующее: 

div{
    display:block;
    overflow:hidden;
    width: 200px; 
    height: 200px;  
    position: relative;
}
div img{
    width: 50px; 
    height: 50px;   
    top: 50%;
    left: 50%;
    bottom: 50%;
    right: 50%;
    position: absolute;
}
1 голос
/ 23 января 2017 
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
1 голос
/ 23 сентября 2017 

div {
  position: absolute;
  
  border: 3px solid green;
  width: 200px;
  height: 200px;
}

img { 
  position: relative;
  
  border: 3px solid red;
  width: 50px;
  height: 50px;
}

.center {    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<div class="center">
  <img class="center" src="http://placeholders.org/250/000/fff" />
</div>

Похожие: Центрирование изображения

0 голосов
/ 05 декабря 2013

У меня была эта проблема в HTML5 с использованием CSS3, и мое изображение было таким образом центрировано в DIV ... о да, я не могу забыть, как мне пришлось добавить высоту, чтобы показать изображение ... какое-то время я Интересно, где это было, пока я не сделал это. Я не думаю, что позиция и отображение необходимы. 

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
0 голосов
/ 06 октября 2013

Это сработало для меня. Добавьте это к изображению css: 

img
{
   display: block;
   margin: auto;
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...