Question

我正在尝试将一个文本块居中放在页面上，同时保持最大宽度为800px。我该怎么做呢？这是我的代码：

#footer {
    text-align: center;
    height: 200px;
    width: 100%;
    opacity: 1;
    background-color: #47a7d3;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
}

#terms {
    width: 800px;
    margin-top: 3em;
    margin-bottom: -0.75em;
    line-height: 1.2em;
    font-size: 12px;
    font-family: Arial;
    color: #ffffff;
}

Answer 1

你可以试试这个

定义#footer id left:0; right:0;删除with:100%;

像这样定义#terms margin-left: auto; margin-right:auto;

<强> CSS

#footer {
        text-align: center;
    height: 200px;
    opacity: 1;
    background-color: #47a7d3;
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
    padding:0;
}

#terms {
    width: 800px;
    margin-top: 3em;
    margin-bottom: -0.75em;
    margin-left:auto;
    margin-right:auto;
    line-height: 1.2em;
    font-size: 12px;
    font-family: Arial;
    color: #ffffff;
}

<强> Demo

Answer 2

这是一个jsfiddle。

我添加了一个max-wdith来保持最大宽度为800px 我向中心div添加了一个0自动边距我添加了一个对齐文本中心，这样做并将p标签添加到#terms id将使文本保持在

中心

使用JSFiddle

http://jsfiddle.net/fMyLz/

CSS：

footer h1{
    text-align: center;
    height: 200px;
    width: 100%;
    opacity: 1;
    background-color: #47a7d3;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0;
    text-align:center;
}

#terms p  {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.2em;
    font-size: 12px;
    font-family: Arial;
    color: #000;
    text-align:center;
}

HTML

<div id="terms">
    <p>hey whast up this works man! hey whast up this works man! hey whast up this works man! hey whast up this works man! hey whast up this works man! hey whast up this works man! hey whast up this works man!</p>
</div>

<footer>
    <h1> This is the footer </h1>
</footer>

Answer 3

假设#terms在#footer中，你可以尝试添加“display：inline-block;”在#terms里面。因为你有“text-align：center;”在页脚上设置，添加“display：inline-block;”对于术语元素将使它被视为文本，它应该居中....但更多信息和HTML代码将更有助于为您的问题提供解决方案。

如何居中文本并在CSS中最大宽度为800px？

3 个答案: