html - 文字不会跟随背景图片

我正在从头开始构建我的第一个网站(我以前只维护过网站或使用程序来创建它们)，如果没有这一切，我似乎无法让文本停留在背景图像之上去左边。这是我的 HTML:

<html>
    <head>
        <title>Abbey Court Guest House</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="header">
            <p>About Us | Contact Us</p>
        </div>
    </body>
</html>

这里的 CSS 模糊地做了我想要它做的事情，但它使所有内容都向左对齐:

.header {
    background-image:url('images/header.jpg');
    background-position: center;
    height: 250px;
    background-repeat: no-repeat;
    color: #73622b;
    width: 1000px;
    text-align: right;
    font-family: "Verdana", "Helvetica", "sans-serif";
}

删除 width: 1000px; 修复了对齐问题，但将文本推到最右边。

附言header.jpg 宽 1000 像素，高 250 像素。

关于如何解决这个问题有什么想法吗？

最佳答案

我没有足够的代表在评论中要求你澄清“留在背景图片之上”的意思，所以如果我说错了请原谅我。

你想让 p 文本在 div 上居中对齐吗？

这是一个 jsfiddle http://jsfiddle.net/LGLKe/1/

关于html - 文字不会跟随背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11702177/