如何居中标题图片 [英] How to center a header image

问题描述

我有问题。

这与我标题中的图片有关，这是代码：

It's about image in my header, here's the code:

HTML

<div id="site">

    <div id="header">
        <img class="center" src="http://i.imgur.com/jfDhpP5.png"/>    
    </div>

    <div id="mainNav">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </div>

</div>

CSS

#container{
    width: 1000px;
    margin: 1em auto;
}

#header{
    display: block;
    width: 1000px;
    margin: 0 auto;
}

body{    
    background-color: grey;
    color: black;
    font-family: sans-serif;
}

img.center{
    text-align:center;
    margin: 0 auto;
    padding:0px;
}

我也尝试这样做：

div#pictures {
  text-align: center;
}

也无法正常工作...已在最新版本的Firefox和IE中签入。 ... oO

also not working... checked in firefox and IE, the newest versions.... o.O

请帮助！

推荐答案

CSS for header

width:100%;
text-align:center;

CSS用于 img

display:inline-block;
margin: 0 auto;

在此处查看示例

也就是说，您的<上只包含 text-align：center; 应该找到code> header ，如此处

That said, merely having text-align:center; on your header should be find, as in here

这篇关于如何居中标题图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！