即使在html / css中调整页面大小，如何将文本保留在屏幕中间

Question

当我在浏览器中调整网站大小时，我的文字会被切断。 这里有一些应该有帮助的图片〜 在重新调整大小之前

http://puu.sh/d3au0/9ec512d685.png

重新调整大小后

http://puu.sh/d3aAx/fbd2ccfb31.png

这是我的代码：

HTML

<div class="content">
        <p>this is sample text.this is sample text.this is sample text.this is sample text.this      is sample text.</p>
</div>

CSS

.content {
position: relative;
text-align: center;
padding-left: 450px;
padding-right: 450px;
width: 800px;
top: 50px;
font-size: 20px;
}   

Answer 1

删除padding并添加margin: 0 auto。

Fiddle

＆＃13;

＆＃13;

.content {
  position: relative;
  text-align: center;
  width: 800px;
  top: 50px;
  font-size: 20px;
  margin: 0 auto;
}

＆＃13;

<div class="content">
  <p>this is sample text.this is sample text.this is sample text.this is sample text.this is sample text.</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

.content {
padding: 20px 20px 20px 20px;
display: inline;
width: 800px;
font-size: 20px;
}   

Answer 3

你可以这样做......

.content {
width: 560px //change it as per your requirements
display:block;
margin-left:auto;
margin-right:auto;
font-size: 20px;
}