对齐背景图像中，中心

这里的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

对齐背景图像中，中心

回答

相关问题