Выровняйте фоновое изображение по центру и центру

Question

Вот HTML:

<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img alt="" src="/Utilities/image.jpg" width="400" height="400" />
</a>
</div>

Вот CSS:

.gallerybox {width:200px;height:200px;overflow:hidden;}

Может кто-нибудь сказать мне способ выравнивания связанного изображения внутри div.gallerybox по центру (по вертикали) и по центру(горизонтально)?Может быть, используя javascript, jQuery или просто CSS?

Answer 1

Джексон. Я собираюсь порекомендовать немного переписать HTML, который, как я понимаю, может оказаться невозможным, но я думаю, что это может быть наиболее эффективным решением вашей проблемы.

Создать скрытое изображение с этой базой данных в кодировке <img>:

img#imgUtility {
   display: none;
}

(CSS и HTML)

<img id="imgUtility" class="galleryImage" alt=""
src="/Utilities/ShowThumbnail.aspx?USM=1&amp;W=350&amp;H=350&amp;
R=1&amp;Img={tag_image_value}" />

Затем, после загрузки страницы и преобразования изображения в фактический URL, вы можете заменить <img> на <span> в своем опубликованном HTML, установить скрытый тег src в качестве фонового изображения <span> используя встроенный атрибут style через JavaScript:

// galleryBoxLinkTarget should be a reference to the <a> in a div.galleryBox
function imgReplacement(galleryBoxLinkTarget) {
   var span = document.createElement("span");
   var img = document.getElementById("imgUtility");
   span.style.backgroundImage = "url('" + img.getAttribute("src") + "')";
   span.className = "imgReplacement";
   galleryBoxLinkTarget.appendChild(span);
}

(JavaScript и HTML)

<div class="gallerybox">
   <a href="/CustomContentRetrieve.aspx?ID=398791">
      <!-- <span> goes here -->
   </a>
</div>

А потом немного умного CSS'инга:

span.imgReplacement {
   display: block;
   background-position: 50% 50%;
   background-repeat: no-repeat;
   width: 200px;
   height: 200px;
}

Это должно центрировать изображение независимо от размера, а также позволяет удалять встроенные атрибуты width и height. Надеюсь, это сработает для вас!

Answer 2

Попробуйте это:

<style type="text/css">
  .gallerybox {text-align:center;vertical-align:middle;height:400px;line-height:400px;}
  .gallerbox img {display:inline; vertical-align:middle;}
</style>

<div class="gallerybox">
   <a href="/CustomContentRetrieve.aspx?ID=398791">
   <img alt="" src="/Utilities/image.jpg" />
</a>

Answer 3

Может быть что-то вроде следующего:

<div class="gallerybox"> 
  <a href="/CustomContentRetrieve.aspx?ID=398791"> 
    <img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&amp;W=400&amp;H=400&amp;R=1&amp;Img={tag_image_value}" />"  /> 
  </a> 
</div> 

.gallerybox {
  width:200px;
  height:200px;
  overflow:hidden;
}

<!-- Edit Again -->
<script language="javascript">
window.onload = fixImage;

function fixImage() {
  var img = document.getElementById('imgUtility');
  var x = img.offsetWidth;
  var y = img.offsetHeight;

  img.style.left = -(x / 2);
  img.style.top = -(y / 2);
}
</script>

Answer 4

Используйте простой JQuery fn с именем center (Использование: $ (element) .center ()):

     jQuery.fn.center = function() {
        this.css("position","absolute");
        this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
        this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
        this.css("bottom", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
        return this;
      }
    $(document).ready(function(){
$(#imgUtility).center();
)};

С HTML:

<div class="gallerybox"> 
  <a href="/CustomContentRetrieve.aspx?ID=398791"> 
    <img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&amp;W=400&amp;H=400&amp;R=1&amp;Img={tag_image_value}" />"  />  
  </a> 
</div>