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

我整个下午都在试，但是我错过了一些东西，有人能帮我吗？ 该页面可在以下链接中找到

包含图像的代码为：

    <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时，它工作得很好，但是当我需要在页面本身中有一个-标记时，我似乎无法实现它

请帮我看看：）这可能很愚蠢，哈哈。

---

非常感谢

设置

边距：0自动，如：

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

设置
边距：0自动，如：

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

我不会将其作为图像，而是作为标题上的背景

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

请参阅以获得粗略的演示
 我不会把它作为图像，而是作为标题上的背景

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

请参阅以获得粗略的演示
 如果不能使用背景图像，另一种方法是使用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>


#图像支架{
溢出：隐藏；//如果图像比holder大，请剪辑图像，不要使用边框。
}
#宽头图像{
位置：相对；//将“左”视为相对于图像的正常位置。
}
//创建以图像为中心的功能；
var centerImage=函数（$）{
var windowWidth=$（window）.width（）；//获取窗口的当前宽度
var imageSize=$（'#wideHeaderImage'）.width（）；//获取图像的宽度
$（'#imageHolder'）.width（windowWidth）；//将包含的元素设置为窗口大小。
如果（imageSize>windowWidth）{//如果图像较宽，则窗口
var offset=（imageSize-windowWidth）/2；//建立偏移量
$（'#wideHeaderImage'）.css（'left'，'-'+offset+'px'）；//应用偏移量
}
};
jquery（函数（$）{
//此代码在加载时在中运行
//注册调整大小事件处理程序
$（窗口）.resize（函数（事件）{centerImage（$）；}）；
//在加载时调整一次大小。
中心图像(元);；
});

我还没有运行这个程序，所以我可能犯了一些错误，希望您能够理解我正在做的事情的要点。
如果您不能使用背景图像，另一种方法是使用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>


#图像支架{
溢出：隐藏；//如果图像比holder大，请剪辑图像，不要使用边框。
}
#宽头图像{
位置：相对；//将“左”视为相对于图像的正常位置。
}
//创建以图像为中心的功能；
var centerImage=函数（$）{
var windowWidth=$（window）.width（）；//获取窗口的当前宽度
var imageSize=$（'#wideHeaderImage'）.width（）；//获取图像的宽度
$（'#imageHolder'）.width（windowWidth）；//将包含的元素设置为窗口大小。
如果（imageSize>windowWidth）{//如果图像较宽，则窗口
var offset=（imageSize-windowWidth）/2；//建立偏移量
$（'#wideHeaderImage'）.css（'left'，'-'+offset+'px'）；//应用偏移量
}
};
jquery（函数（$）{
//此代码在加载时在中运行
//注册调整大小事件处理程序
$（窗口）.resize（函数（事件）{centerImage（$）；}）；
//在加载时调整一次大小。
中心图像(元);；
});

我还没有运行此程序，所以我可能犯了一些错误，希望您能够理解我正在做的事情的要点。
嘿，安迪，谢谢您的回复。但是它不起作用，可能是因为我在CSS中做了一些奇怪的事情。你介意检查一下房间吗？也许你能发现我做错了什么。再次感谢@RobinPapa哦，你希望图像的中心一直在屏幕上，并且图像总是1920像素宽？只有CSSWell不可能做到这一点：我使用比屏幕宽度大的图像，通常是1920像素，这样图像可以在各种各样的屏幕上以100%的屏幕宽度显示。我只需要它一直水平居中，这样我就能在1440px屏幕上看到中心1440像素。使用边距：0“自动”根本不起作用：/。你是对的，这就是我试图建立的，只是不是1920像素，而是图像的全尺寸。只需对图像应用
宽度：100%
，它将始终与屏幕一样宽，然后忽略不计，谢谢！成功了！我想我已经试过了哈哈，非常感谢！安迪，谢谢你的回复。但是它不起作用，可能是因为我在CSS中做了一些奇怪的事情。你介意检查一下房间吗？也许你能发现我做错了什么。再次感谢@RobinPapa哦，你希望图像的中心一直在屏幕上，并且图像总是1920像素宽？只有CSSWell不可能做到这一点：我使用比屏幕宽度大的图像，通常是1920像素，这样图像可以在各种各样的屏幕上以100%的屏幕宽度显示。我只需要它一直水平居中，这样我就能在1440px屏幕上看到中心1440像素。使用边距：0“自动”根本不起作用：/。你是对的，这就是我试图建立的，只是不是1920像素，而是图像的全尺寸。只需对图像应用
宽度：100%
，它将始终与屏幕一样宽，然后忽略不计，谢谢！成功了！我想我已经试过了哈哈，非常感谢！嘿，大卫，非常感谢！不幸的是，在我最初的设计中，我确实使用了这个修复程序，但我仍然坚持使用Wordpress并从博客文章的“特色图片”部分检索图像。所以我需要使用img标签。你能帮我进一步吗？谢谢：）嘿，大卫，非常感谢！不幸的是，在我最初的设计中，我确实使用了这个修复程序，但我仍然坚持使用Wordpress并从博客文章的“特色图片”部分检索图像。所以我需要使用img标签