如何水平對齊以下標題圖像？

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>

我想在較小的屏幕上將寬度為1920像素的圖像水平居中。 當我給一個類設置屬性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>

我沒有執行此操作，所以我可能犯了一些錯誤，希望足以讓您了解我正在做的事情。