Подтвердить что ты не робот

Вертикально и горизонтально Центральное изображение внутри Div, если вы не знаете размер изображения?

Если у меня есть контейнер с фиксированным размером и изображение неизвестного размера, как мне горизонтально и вертикально центрировать его?

  • с использованием чистого css
  • с помощью JQuery, если css не может этого сделать

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

Что-то вроде этой структуры (я имею в виду элементы рендеринга элементов, подобные этим в списке, но где изображение слева не будет" t всегда одного размера:

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

Спасибо за помощь!

4b9b3361

ОТВЕТЫ

Ответ 1

Если установка изображения в качестве фонового изображения и центрирование его таким образом не является вариантом, jQuery для адаптации ответа, связанного с статическими изображениями, будет идти:

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image width
  var hTall = ($(this).height())/2; //half the image height, etc.

  // attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';
  hTall = '-' + hTall + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
    "margin-top" : hTall
  });
});

предполагая класс CSS, определенный как

.variable.js-fix {
  position:absolute;
  top:50%;
  left:50%;
}

с делением фиксированной ширины, имеющим высоту и position:relative.

[важное js edit: переключено '.style()' в '.css()']

Ответ 2

Вы можете использовать background-position для этого.

#your_div {
    background-position: center center;
    background-image: url('your_image.png');
}

Ответ 3

Решение кроссбраузера

<style>
  .border {border: 1px solid black;} 
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
  <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
    <div class="border" style="width: 400px; #position: relative; #top: -50%">
      <img src="smurf.jpg" alt="" />
  </div>
</div>

Исходное решение для вертикального размещения div

Ответ 4

Посмотрите мое решение: http://codepen.io/petethepig/pen/dvFsA

Он написан в чистом CSS без какого-либо JS-кода. Он может обрабатывать изображения любого размера и любой ориентации.

добавьте еще один div в ваш HTML-код:

<div class="imageContainer">
    <img src="gallery/image1"/>
</div>

Код CSS:

.imageContainer {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.imageContainer:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Обновление: Я избавился от этого элемента <div class="trick"></div> в пользу :before селектора CSS

Ответ 5

Если вы не знаете размеры изображения, но вы загрузили изображения рядом с размером контейнера (возможно, больше или меньше изображений), этот пост может быть полезен. Что-то, что работает для меня, это следующий код:

<a class="linkPic" href="#">
    <img src="images/img1.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img2.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img3.jpg" alt=""/>
</a>

И в файле .css у вас есть следующие правила:

a.linkPic{
    position:relative;
    display: block;
    width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
    position:absolute;
}

Вы можете заметить, что у вас есть тег изображения внутри a.linkPic, поэтому сначала вы должны установить его как "position: relative" для содержания абсолютного элемента "img". Трюк, чтобы сосредоточить изображение без проблем, - это небольшой код jQuery. Следуйте комментариям, чтобы понять, что происходит (некоторые строки были взяты из сообщения Владимира Марьясова на этой странице):

$("a.linkPic img").each(function() {
    // Get container size
    var wrapW = $("a.linkPic").width();
    var wrapH = $("a.linkPic").height();

    // Get image sizes
    var imgW = $(this).width();
    var imgH = $(this).height();

    // Compare if image is bigger than container
    // If image is bigger, we have to adjust positions
    // and if dont, we have to center it inside the container
    if (imgW > wrapW && imgH > wrapH) 
    {
        // Centrar por medio de cálculos
        var moveX = (imgW - wrapW)/2;
        var moveY = (imgH - wrapH)/2;

        // attach negative and pixel for CSS rule
        var hWide = '-' + moveX + 'px';
        var hTall = '-' + moveY + 'px';

        $(this).addClass("imgCenterInDiv").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    } else {
        $(this).addClass("imgCenterInDiv").css({
            "left" : 0,
            "right" : 0,
            "top" : 0,
            "bottom" : 0,
            "margin" : "auto",
        });
    }//if
});

После этого все изображения внутри контейнеров a.linkPic будут размещены идеально по центру. Я надеюсь, что этот пост может быть полезен для кого-то!

Ответ 6

Использование дисплея: трюк таблицы для div

Работает правильно: Firefox, Safari, Opera, Chrome, IE8

Пример CSS:

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
img {
  display: inline;
}

Пример HTML:

<div>
  <span></span>
  <img src="" alt="" />
</div>

Пример Firefox

Ответ 7

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

Сначала получите размеры изображения. Затем, исходя из высоты вашего div, вы можете выяснить, какой должна быть верхняя граница. Это будет вертикально центрировать его. Просто измените значения $IMG_URL и $DIVHEIGHT.

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

Например.

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>

Ответ 8

Это вариант PHP.

Это много кода, но работает как шарм. Я придумал это после прочтения нескольких сообщений по этому вопросу. Он позиционирует изображения разных размеров в одной фиксированной ширине и высоте div

Вы должны содержать это CSS:

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

Ваш код должен быть следующим:

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>

Ответ 9

Используйте высоту: 100% для тега html, тега тела, контейнера и пустого элемента-заполнителя плюс отображение: встроенный блок; и vertical-align: middle для содержимого и заполнителя для вертикального центра контента, который имеет высоту undefined в браузерах. Элементу-заполнителю присваивается высота 100%, чтобы поддерживать линию линии, так что выравнивание по вертикали: среднее имеет желаемый эффект. Для упаковки изображений используйте контейнер с фиксированной шириной.

Использовать отображение: встроить для div div и text-align center в контейнер div для горизонтального центрирования содержимого с шириной undefined в браузерах.

Объедините оба метода для создания централизованной галереи изображений:

<!doctype html>
<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}

img { margin-left: 20px; margin-top: 10px; }

.container { text-align:center; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.fixed { width: 900px; }

.content { display:inline; }

@media,
 {
 .wrapper { display:inline; }
 }
 </style>

</head>
  <body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
          <div class="fixed">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
        </div>
      </div>
   </div>
   <span class="placeholder"></span>
</div>

</body>
</html>

Ответ 10

Я использовал

.on('load', function () {

вместо

.each(function(){

используется в этом ответе, он помогает устранить проблему с пустыми значениями высоты и ширины, когда изображение еще не загружено

<style type="text/css">
.fixed-div {
    position: relative;
}

.variable {
    width: 100%;
    height: auto;
}

.variable.js-fix {
    position:absolute;
    top:50%;
    left:50%;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
    $(".fixed-div img.variable").on('load', function () {
        //get height and width (unitless) and divide by 2
        var hWide = ($(this).width())/2; //half the image width
        var hTall = ($(this).height())/2; //half the image height, etc.
        console.log("width", $(this).width());
        console.log("height", $(this).height());

        // attach negative and pixel for CSS rule
        hWide = '-' + hWide + 'px';
        hTall = '-' + hTall + 'px';

        $(this).addClass("js-fix").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    });
});
</script>

<div class="fixed-div">
    <img class="variable" src=""/>
</div>

Ответ 11

Центральное изображение по горизонтали и вертикали

DEMO:

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/

 .section {
            background: black;
            color: white;
            border-radius: 1em;
            padding: 1em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%) 
       }

Ответ 12

С CSS3 flexbox вам больше не понадобятся хаки для центрирования изображения. В настоящее время он поддерживается всеми современными браузерами. Проверьте Могу ли я использовать flexbox?

.container {
  display: flex; /* Flexible layout container */
  justify-content: center; /* Horizontal center alignment */
  align-items: center; /* Vertical center alignment */
  background: lightblue;
  /* Fixed size container */
  height: 300px;
  width: 300px;
}
<div class="container">
  <img src="http://placehold.it/150x150">
</div>