调整网页大小时，我的 html/css 文本移动到页面左侧答案

【问题标题】：When re sizing web page, my html/css text moves to left side of the page调整网页大小时，我的 html/css 文本移动到页面左侧
【发布时间】：2014-10-28 17:07:13
【问题描述】：

对于 css，我是个菜鸟，但我在 html/css 中的文本遇到问题。当我调整我的网页大小时，我的文字会出现在页面的左侧并且变得混乱和不合适。这是我的代码：

**CSS:**
#NewsPosts {
position: fixed;
width: 75%;
top: 260px;
left: 32%;
padding: 30px;
overflow: hidden;

**HTML:**
<!--News Posts-->
            <div id="NewsPosts">
                <p>MY text goes here</p>
            </div>

【问题讨论】：

你想要的结果是什么？ IE，不管窗口大小，你想让#NewPosts居中吗？
是的，这就是我想要发生的事情。

标签： html css positioning center

【解决方案1】：

如果您想将#NewPosts 居中显示在所有屏幕上，您可以这样完成： http://jsfiddle.net/uknqdr6g/

CSS

#NewsPosts {
    width: 75%;
    /* margin-top:260px; If you want to use the margin-top */
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    padding: 30px;
}

如果您仍然希望它具有position:fixed;，请重新排列您的代码，如下所示：http://jsfiddle.net/uknqdr6g/1/

HTML

<div id="container">
    <div id="NewsPosts">
        <p>MY text goes here</p>
        <img src="http://images5.fanpop.com/image/photos/31100000/random-random-31108109-500-502.jpg" width="300" height="auto">
    </div>
</div>

CSS

#container {
    left: 50%;
    width:400px;
    /* margin-top:260px; if you still want to use your margin-top */
    margin-left: -200px; /* Half of the width */
    background:#000;
    padding:20px;
    position: fixed;
}
#NewsPosts {
    width:100%;
    left: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    background:#fff;
}

【讨论】：

【解决方案2】：

快速搜索居中将提出这个简单的想法：

html -

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

无论我们想怎么称呼它div，但它将是您想要在页面中居中的任何内容。然后在 css 中，我们有 -

html, body {
    width: 100%;
    height: 100%;
    background: #000;
}

.container {
    width: 50%;
    height: 50%;
    position: relative;
    top:50%;
    transform: translateY(-50%);
    background: #fff;
    margin: 0 auto;
}

我们将 html 和 body 设置为 100%，这样我们的容器就有了一些东西可以离开和居中。

    position: relative;
    top:50%;
    transform: translateY(-50%);

是重要的部分。我们说container 应该垂直居中于其父级的 Y 轴。在这种情况下 container 的父母是 body 。为了让它以 x 轴为中心，我们把我们的朋友放在了

margin: 0 auto;

JSFiddle

弄乱height 和width，看看会发生什么。无论container width 还是height，它都应该保持居中

【讨论】：