Question

对于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>

Answer 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; }

Answer 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

，它都应该保持中心

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

2 个答案: