Question

我正在构建我的第一个网站（我以前只维护网站或使用程序来创建它们）从头开始，我似乎无法让文本保持在背景图像之上而不是全部向左走。这是我的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;修复了对齐问题，但将文本推送到最右侧。

P.S。 header.jpg宽1000像素，高250像素。

有关如何解决此问题的任何想法？

Answer 1

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

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

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

文字不会跟随背景图片

1 个答案: