Вертикально и горизонтально Расположите изображение в центре, если вы не знаете его размер.

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

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

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

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

<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>

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

12 голосов | спросил Lance Pollard 13 MaramSat, 13 Mar 2010 05:05:14 +03002010-03-13T05:05:14+03:0005 2010, 05:05:14

12 ответов


0

Если установка изображения в качестве фонового изображения и центрирование его таким образом не является подходящим вариантом, jQuery может адаптировать -image-center-вертикально-горизонтально-внутри-большего-div "> ответ, который вы связали для статических изображений , будет такой:

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image's width
  var hTall = ($(this).height())/2; //half the image's 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%;
}

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

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

ответил D_N 13 MaramSat, 13 Mar 2010 07:42:19 +03002010-03-13T07:42:19+03:0007 2010, 07:42:19
0

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

#your_div {
    background-position: center center;
    background-image: url('your_image.png');
}
ответил Wolph 13 MaramSat, 13 Mar 2010 05:09:18 +03002010-03-13T05:09:18+03:0005 2010, 05:09:18
0

Кроссбраузерное решение

<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

ответил edtsech 13 MaramSat, 13 Mar 2010 09:29:04 +03002010-03-13T09:29:04+03:0009 2010, 09:29:04
0

Ознакомьтесь с моим решением: 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's 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-селектор

ответил dmitry 29 J0000006Europe/Moscow 2013, 00:42:06
0

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

<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;
}

Вы можете заметить, что у вас есть тег image внутри a.linkPic, поэтому сначала вы должны установить его как «position: родственник» для содержания абсолютного элемента 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 будут расположены по центру. Надеюсь этот пост кому-нибудь пригодится!

ответил Ricardo Rodriguez 15 22016vEurope/Moscow11bEurope/MoscowTue, 15 Nov 2016 03:33:44 +0300 2016, 03:33:44
0

Использование display: трюк с ячейкой таблицы для 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

ответил edtsech 13 MaramSat, 13 Mar 2010 08:10:17 +03002010-03-13T08:10:17+03:0008 2010, 08:10:17
0

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

Сначала получите размеры изображения. Затем на основе высоты вашего 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>
ответил vitalyp 7 Jpm1000000pmSat, 07 Jan 2012 22:14:46 +040012 2012, 22:14:46
0

Это вариант 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>';
?>
ответил Rob 21 +04002012-10-21T17:43:42+04:00312012bEurope/MoscowSun, 21 Oct 2012 17:43:42 +0400 2012, 17:43:42
0

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

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

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

<!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>
ответил Paul Sweatte 22 J0000006Europe/Moscow 2012, 04:40:46
0

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

.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's width
        var hTall = ($(this).height())/2; //half the image's 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>
ответил Vladimir Maryasov 16 Mayam14 2014, 09:31:12
0

Благодаря 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>
ответил Manoj Kumar 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 17 Sep 2015 15:32:45 +0300 2015, 15:32:45
0

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

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%) 
       }
ответил Dhwani sanghvi 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 17 Sep 2015 15:22:45 +0300 2015, 15:22:45

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132