Html 内容的CSS中心列_Html_Css

Html 内容的CSS中心列

html css

Html 内容的CSS中心列,html,css,Html,Css,我几乎可以肯定，这个问题以前有人问过，也有人回答过，但我没有找到，也许是因为我无法用语言恰当地解释自己。我目前拥有的是一个新网站的设计，但我似乎不知道如何为内容制作一个中心栏目。让我给你举例说明这就是它目前的样子：这就是我希望它看起来的样子：如果我说得不够清楚，我会道歉。非常感谢您的帮助试试这个： .centerDiv{ 文本对齐：居中；宽度：80%；保证金：0自动；背景：青色； } 居中最简单的方法是将容器边距设置为“自动”，并为内容的宽度指定一个值假定 <main

我几乎可以肯定，这个问题以前有人问过，也有人回答过，但我没有找到，也许是因为我无法用语言恰当地解释自己。我目前拥有的是一个新网站的设计，但我似乎不知道如何为内容制作一个中心栏目。让我给你举例说明

这就是它目前的样子：

这就是我希望它看起来的样子：

如果我说得不够清楚，我会道歉。非常感谢您的帮助

试试这个：

.centerDiv{ 文本对齐：居中；宽度：80%；保证金：0自动；背景：青色； } 居中

最简单的方法是将容器边距设置为“自动”，并为内容的宽度指定一个值

假定

<main class="container">
    <div class="content"></div>
</main>

对于白色div，应设置宽度，然后设置边距：0自动；使其与中心对齐。对于H1，您可以使用宽度：100%；文本对齐：居中

<body>
    <div id="main-content">
        <h1>Content Here</h1>
    </div>
</body>

<style>
    body {
        width:100%;
    }

    #main-content {
        float:none;
        width:1200px;
        margin:0 auto;
    }

    #main-content h1 {
        width:100%;
        text-align:center;
    }
</style>

显示您的代码您已经尝试了什么保持一个容器div并应用它宽度：1000px；保证金：0px自动；下一次尝试在这里上传图片，而不是使用其他网站：在这里查看图片要比使用其他网站更快link@Narkha由于声誉太低，我无法在这里上传图片，所以我把它们上传到了一个外部网站。@GaganGami我还没有尝试过任何代码，因为我是一个十足的白痴，当涉及到前端CSS和HTML时，我甚至还没有尝试过任何东西，因为我不知道从哪里开始。我不认为这是OP想要的。。ಠ_ಠ关于你的编辑，它工作得很好。但是，导航栏是固定样式，因此主体的第一部分位于导航栏后面。如何克服此问题？例如，可以在centerDiv类中添加“position:relative”和“margin:5%0记住top、right、bottom和left。效果很好，比其他方法更好。谢谢。这种方法似乎效果最好。非常感谢你。我也会给你名声，但我自己没有足够的能力这么做。所以我为此道歉。

<body>
    <div id="main-content">
        <h1>Content Here</h1>
    </div>
</body>

<style>
    body {
        width:100%;
    }

    #main-content {
        float:none;
        width:1200px;
        margin:0 auto;
    }

    #main-content h1 {
        width:100%;
        text-align:center;
    }
</style>