html - 如何在页面而不是 div 之间居中放置文本？

Question

所以我想在页面上将一些文本(p 元素)居中，但我有一个 div float 到左侧，这会影响文本居中对齐div 而不是页面。我该如何解决这个问题？

另外请全屏查看我在说什么。

#img1 {
width: 220px;
height: 220px;
}

#box1 {
  width: max-width;
  height: 1650px;
  background-color: #ECECEC;
}

#box2 {
float:left;
padding-left:250px;
}

#box3 {
text-align:center;
}

#p1 {
  text-align:left;
}    

<div id="box1">
<div id="box2">
<img id="img1" src ="images/hack.jpg"/>
</div>
<div id="box3"
<p id="p1">
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum<br>
</p>
</div>
</div>

Answer 1

你需要在框#2 上添加这个

position:absolute；

此外，删除 #p1

上的 text-align: left

这样，即使该框 float 在左侧，您的文本也会在整个页面上居中。