Как центрировать изображение в div горизонтально и вертикально

У меня есть следующий код разметки на моей странице:

<div id="root_img" style="width:100%;height:100%">
    <div id="id_immagine" align="center" style="width: 100%; height: 100%;">
        <a id="a_img_id" href="./css/imgs/mancante.jpg">
            <img id="img_id" src="./css/imgs/mancante.jpg" />
        </a>
    </div>
</div>

И он не выглядит так, как я ожидал, он выглядит так:

enter image description here

Но я хотел получить этот результат:

enter image description here

Как я могу центрировать это изображение по горизонтали и по вертикали?

Ответы

Ответ 1

Вот учебник о том, как центрировать изображения по вертикали и горизонтали в div.

Вот что вы ищете:

.wraptocenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 200px;
  height: 200px;
  background-color: #999;
}
.wraptocenter * {
  vertical-align: middle;
}
<div class="wraptocenter">
  <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
</div>

Ответ 2

Для вертикального выравнивания я бы включил некоторый CSS, чтобы расположить его с верхних 50%, а затем переместить его на половину числа пикселей высоты изображения.

Горизонтально, я бы использовал запас, как и предполагалось.

Итак, если ваше изображение было 100x100px, вы бы закончили.

<img id="my_image" src="example.jpg">

<style>
#my_image{
 position: absolute;
 top: 50%;
 margin: -50px auto 0;
}
</style>

Ответ 3

Есть два аспекта, которые вам необходимо решить. Первый аспект - горизонтальное выравнивание. Это легко достижимо с пометкой: автоматически применяется к элементу div, окружающему изображение. DIV должен иметь ширину и высоту, установленные для размера изображения (иначе это не сработает). Чтобы добиться вертикального выравнивания по центру, вам нужно добавить javascript в HTML. Это связано с тем, что размер высоты HTML не известен при запуске страницы и может измениться позже. Лучшим решением является использование jQuery и запись следующего script:       $(window).ready(function() {/* слушать событие готовности к окну - запускается после загрузки страницы */           repositionCenteredImage();       });

    $(window).resize(function() { /* listen to page resize event - in case window size changes*/ 
        repositionCenteredImage();
    });

    function repositionCenteredImage() { /* reposition our image to the center of the window*/
        pageHeight = $(window).height(); /*get current page height*/
        /*
        * calculate top and bottom margin based on the page height
         * and image height which is 300px in my case.
         * We use half of it on both sides.
         * Margin for the horizontal alignment is left untouched since it is working out of the box.
        */
        $("#pageContainer").css({"margin": (pageHeight/2 - 150) + "px auto"}); 
    }

HTML-страница, отображающая изображение, выглядит следующим образом:

    <body>
        <div id="pageContainer">
            <div id="image container">
                <img src="brumenlabLogo.png" id="logoImage"/>
            </div>
        </div>
    </body>

CSS, прикрепленный к элементам, выглядит следующим образом:

#html, body {
    margin: 0;
    padding: 0;
    background-color: #000;
}

#pageContainer { /*css for the whole page*/
    margin: auto auto;   /*center the whole page*/
    width: 300px;
    height: 300px;
}

#logoImage { /*css for the logo image*/
    width: 300px;
    height: 300px;
}

Вы можете загрузить все решение с домашней страницы нашей компании по следующему URL:

http://brumenlab.com

Ответ 4

Это решение для всех изображений размера В этом также поддерживается ратификация изображения.

.client_logo{
  height:200px;
  width:200px;
  background:#f4f4f4;
}
.display-table{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
.display-cell{
    display: table-cell;
    vertical-align: middle;
}
.logo-img{
    width: auto !important;
    height: auto;
    max-width: 100%;
    max-height: 100%;

}
<div class="client_logo">
    <div class="display-table">
      <div class="display-cell">
         <img src="http://www.brunildo.org/thumb/tmiri2_o.jpg">
      </div>
    </div>
</div>

Ответ 5

Image in a div horizontally and vertically.

<div class="thumbnail">                
    <img src="image_path.jpg" alt="img">
</div>

.thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

Ответ 6

Попробуйте что-то вроде этого:

<div style="display:table-cell; vertical-align:middle">
 "your content"
</div>

Ответ 7

с использованием margin-top

Пример css

 #id_immagine{
  margin:0 auto;
   }