Question

我有一个带CSS代码的简单HTML页面。

当我调整窗口大小（从大到小）并向左和向右滚动页面时，文本“这工作正常”保持在其位置。它是固定的，工作正常。

但如果我左右滚动页面，文本“这不能正常”将不会居中。这是主要问题。即使在向左和向右滚动页面之后，该div也应始终水平居中并位于页面底部 - 而不是在屏幕底部。

<div style="width: 1050px;
            top: 0;
            left: 50%;
            margin-left: -525px;
            position: fixed;
            z-index: 10;">
  This is working OK
</div>

<div style="white-space: nowrap;
            margin-left: auto;
            margin-right: auto;
            margin-top: 150px;
            overflow: visible;">
  Here is text which is so long that a horizontal scrollbar will be needed for the browser window
</div>

<div style="clear: both;
            position: relative;
            overflow: hidden;
            width: 1050px;
            margin-left: auto;
            margin-right: auto;">
  <div style="position: relative; clear: both;">
    <div style="clear: both;
                width: auto;
                margin-left: 30px;
                margin-right: 30px;">
      This is not working OK
    </div>
  </div>
</div>

那么，我该如何修复代码呢？

Answer 1

div3上的

tex-align center将对齐文本中心

请检查上面提到的codepen中的更改 http://codepen.io/nagasai/pen/qNRXzJ

Div始终居中 - 即使向左和向右滚动页面

1 个答案: