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

我已经尝试了整个下午，但我错过了一些东西，有人可以帮助我吗？该页面可以在以下链接找到如何水平对齐以下标题图像？

The page with the image that I need fixed。

包含图像的代码是：

<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在小屏幕上的宽度居中图像。当我给一个类的属性背景位置：顶部中心，它完美的作品，但是当我需要在页面中有一个 - 标签，我似乎无法做到这一点。

请帮我看看:)这可能是非常愚蠢的，哈哈。非常感谢！

来源

2012-11-13 Robin Papa

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

来源

2012-11-13 17:16:38 Andy

嘿安迪，谢谢你的回复。但它不起作用，可能是因为我在CSS中做了一些奇怪的事情。你会介意查看[page]（http://www.websu.it/tv-film/hello-world/）吗？也许你可以找出我做错了什么。再次感谢！ –

@RobinPapa噢，你想要图像的中心不断地在屏幕上，图像始终是1920px宽？这是不可能的只有CSS – Andy

不完全是这样的：我使用大于屏幕宽度的图像，通常是1920px，以便在各种屏幕上以100％的屏幕宽度显示图像。例如，我只需要它始终处于水平居中的位置，以便在1440像素的屏幕上看到中心1440像素。使用margin：0 auto只是不起作用：/。你说得对，虽然我试图建立，但不是与1920像素，但只是图像的全尺寸。 –

我不会把这个作为一个形象，但作为你的头的背景。

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/粗略示范。

来源

2012-11-13 17:37:40

嘿大卫，非常感谢！不幸的是，在我最初的设计中，我确实使用了这个修复程序，但我坚持使用Wordpress，并从博客文章的“特色图像”部分检索图像。所以我需要使用img标签。你能进一步帮助我吗？感谢:) –

如果你不能使用背景图像的另一种方法是使用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>

我没有运行这个，所以我可能已经犯了一些错误，希望能够让你得到我在做什么的要点。

来源

2012-11-14 17:40:55

非常感谢，将不得不再次测试这个！非常感谢！ –

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

回答

相关问题