html - 如何水平对齐以下标题图像？

Question

我已经尝试了整个下午，但我错过了一些东西，有人可以帮我解决这个问题吗？该页面可以在以下链接中找到

带有我需要修复的图像的页面。

包含图像的代码是：

    <headerimage><span>
            <img width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header"></span>
        </headerimage>

我想在较小的屏幕上将宽度为 1920px 的图像水平居中。当我给一个类属性 background-position: top center 时，它工作得很好，但是当我需要在页面本身中有一个 -tag 时，我似乎无法实现它。

请帮我看看：）这可能很愚蠢，哈哈。非常感谢！

Answer 1

在图像上设置margin: 0 auto;，如：

<headerimage>
  <span>
    <img style="margin:0 auto;" width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header">
  </span>
</headerimage>

Answer 2

我不会把它作为图像而是作为你标题的背景。

background-image:url('http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg');
background-position-x:center;
background-repeat:no-repeat;

有关粗略演示，请参见http://jsfiddle.net/dwat001/Q58YZ/。

Answer 3

如果您不能使用背景图像，另一种方法是使用 javascript 来定位图像。

<style>
  #imageHolder {
    overflow: hidden; // if image is bigger then holder, clip the image, no scollbars.
  }

  #wideHeaderImage {
    position: relative; // treat "left" as relative to the images normal position.
  }
</style>
<headerimage id="imageHolder">
  <img id="wideHeaderImage" width="1920".../>
</headerimage>

<script src="jquery"></script>
<script>
  // create function to center image;
  var centerImage = function($) {
     var windowWidth = $(window).width(); // get the current width of the window
     var imageSize = $('#wideHeaderImage').width(); // get width of image                                             
     $('#imageHolder').width(windowWidth); // set the containing element to be size of window.
     if(imageSize > windowWidth) { // if image is wider then window
       var offset = (imageSize - windowWidth) / 2; // Establish an offset
       $('#wideHeaderImage').css('left', '-' + offset + 'px'); // apply offset
     }
  };

  jquery(function($) {
    // this code runs within on load

    // register a resize event handler
    $(window).resize(function(event){centerImage($);});
    // resize once on onload.
    centerImage($);
  });
</script>

我没有运行这个，所以我可能犯了一些错误，希望足以让你了解我正在做的事情的要点。