无法在图像上居中标题标签

Question

我试图将图像和它们的帖子标题居中对齐，但不知何故，图像的左侧部分和标题被剪掉了一小部分。我尝试了很多东西，但无法使标题标签居中。 Here is the site 我试图将图片与他们的帖子标题一起居中，我使用的脚本是下面的脚本

<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function() {
    // 0change the dimension variable below to be the max pixel width you want the grid elements to be
    // this works better if they're the same size
    var width       = 190;
    var height      = 190;

    // need an image to use in case the blog post does not have an image
    // works best if the image is the same dimensions as the above variable values for grid size
    var placeholder = 'http://lh5.googleusercontent.com/-bY-qeacmAlA/UI_98V9I9WI/AAAAAAAAGWc/8FzFSGYaj3o/s270/placeholder.jpg';

    // grid margins such as 5px
    var margins     = "15px 2px 5px 2px";

    // set 1 for squared image or 0 for proportional,
    // highly recommend squared otherwise grid might not display properly
    // squared images only works for images hosted in Picasa
    var square      = 1;

    // style info for the "alt" area where the post title will be displayed
    var altBackground       = "#000000";
    var altTextColor        = "#ffffff";
    var altPaddingTop       = 15;
    var altPaddingBottom        = 20;
    var altPaddingSides     =5; 

    var paddingString = altPaddingTop + 'px ' + altPaddingSides + 'px ' + altPaddingBottom + 'px ' + altPaddingSides + 'px';

    $('.post-body').each(function(n, wrapper){
        var wrapper         = $(wrapper);
        var image       = $(wrapper).find('img').first();
        var link        = wrapper.parent().find('h3 a');
        var linkURL         = link.attr('href');
        var linkTitle       = link.text();

        $(link).remove();
        wrapper.empty();

        if (image.attr('src')) {
            var imageOriginalHeight = image.attr('height');
            var imageOriginalWidth = image.attr('width');   
            var imageParent = $(image).parent();

            wrapper.append(imageParent);

            if (square) {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width + '-c')});
                image.attr('width',width).attr('height',height);
            } else {
                image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + width)});
                image.attr('width',width);
                var newHeight = (imageOriginalHeight/imageOriginalWidth * width).toFixed(0);
                image.attr('height',newHeight);
            }

        } else {
            var image = $('<img>').attr('src',placeholder).attr('height',height).attr('width',width);
            var imageParent = $('<a>').append(image).appendTo(wrapper);
        }

        imageParent.attr('href',linkURL).css('clear','none').css('margin-left','0').css('margin-right','0').addClass('postImage');

        var imageAlt = $('<div>').prepend(linkTitle).css('padding',paddingString).css('color',altTextColor).css('background-color',altBackground).css('opacity','0.9').css('filter','alpha(opacity=90)').css('width',width).appendTo(imageParent);  //.

        var divHeight = imageAlt.height();
        var sums = parseInt(divHeight) + parseInt(altPaddingTop) + parseInt(altPaddingBottom);
        imageAlt.css('margin-top','-'+sums+'px');           
        wrapper.css('float','left').css('height',height).css('width',width).css('margin',margins).css('overflow','hidden');
    });
    $('#blog-pager').css('clear','both');
});

function killLightbox() {
    var images = document.getElementsByTagName('img');
    for (var i = 0 ; i < images.length ; ++i) {
        images[i].onmouseover=function() {
            var html = this.parentNode.innerHTML;
            this.parentNode.innerHTML = html;
            this.onmouseover = null;
        };
    }
}

if (window.addEventListener) {
    window.addEventListener('load',killLightbox,undefined);
} else {
    window.attachEvent('onload',killLightbox);
}
//]]></script>
<style>
a.postImage div {
    display:    block;
} a.postImage:hover div {
    display:    block;
}
h3, .post-footer {
    display:    none;
}
 h2{display: none;}
</style>

这是修改后的脚本，您可以找到 here 的实际脚本。要测试您的修改，您可以在 chrome 或其他浏览器中使用 Stylebot app 扩展名。提前谢谢了！ :)

Answer 1

我不确定如何编辑脚本，但通过 chrome 控制台我做了以下修复它。

1. 在柱体下方移除浮动。
2. 偏移图像本身。

文本已经居中，问题是元素的定位。

看截图 -> 繁荣之地

编辑

     .postImage img {left: -6px; bottom: 10px;} 
     .post-body a {float:none;}