對齊背景圖像中，中心

這裏的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中間內部鏈接的圖像（垂直）和中心（horizontaly）？也許使用JavaScript，jQuery或只是普通的CSS？

來源

2010-02-02 Jackson

也許像下面這樣：

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

來源

2010-02-02 02:55:29

無法執行此操作，因爲它是使用以下方法從數據庫中繪製圖像的託管解決方案：並且無法在樣式表中使用代碼，甚至無法使用style =「」。 – Jackson 2010-02-02 03:06:46

@傑克遜：啊，好的，我明白你的意思了。 – 2010-02-02 03:14:45

@傑克遜：在編輯的想法 – 2010-02-02 03:19:50

傑克遜。我將推薦一些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後，可以在您發佈的HTML中將<img>替換爲<span>，將隱藏標記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'ing的：

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

這應該居中的圖片，無論尺寸，以及允許您刪除內聯width和height屬性。希望這能爲你解決！

來源

2010-02-02 05:23:58 Impirator

嗨Impirator。感謝您的時間到目前爲止！我已被拉到另一個項目，並儘快嘗試你的代碼！會盡快讓你知道 – Jackson 2010-02-03 12:03:40

再次感謝，但仔細一看，我已經明白，Adobe Business Catalyst中的這個特殊功能並不能將圖像解析爲一個真實的URL，它保持相同的垃圾格式，這意味着;字符搞砸了CSS :(任何其他想法？ – Jackson 2010-02-03 13:14:54

試試這個：

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

來源

2010-02-02 05:37:16 jerjer

使用一個簡單的jQuery FN稱爲中心（用法：$（元素）.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>

來源

2011-08-21 21:51:57 Shawn31313

對齊背景圖像中，中心

回答

相關問題