html - 文本对齐 : Center - Not Working

Question

我正在尝试使用 text-align: center 在我的 DJ 网站上对齐我的名字 - http://www.jameswinfield.co.uk/v2.html#

但是它不起作用。我有一种使用 left: 30% 的修复方法，但这在较薄的屏幕上看起来非常困惑，因为我的名字然后变成两行并遮盖了下一个文本部分。

我尝试过使用 display: block 和 margin: 0 auto 但似乎都不起作用。

.james {
  color: #F235E9;
  font-size: 6.25em;
  position: fixed;
  left: 30%;
  top: 28%;
  text-transform: uppercase;
  font-family: Oswald;
  letter-spacing: 6px;
}
.und {
  color: #F235E9;
  font-size: 3.125em;
  position: fixed;
  left: 35%;
  top: 42%;
  text-transform: uppercase;
  font-family: Oswald;
}

<div class="cen">
  <div class="james">

    <p>James Winfield</p>
  </div>


  <div class="und">

    <p>Underground House DJ</p>

  </div>



  <ul id="ticker01">
    <li><a href="https://www.mixcloud.com/jameswinfield/semi-detached-house/" target="_blank">New house mix released - 18 different house track from 18 different years</a>
    </li>
    <li><a href="https://www.facebook.com/events/1647401842148267/" target="_blank">Next DJing on 21st August at Purple Turtle - midnight to 2am (ish) - free entry as always</a>
    </li>
    <li><a href="http://www.residentadvisor.net/dj/jameswinfield/top10" target="_blank">May DJ chart uploaded</a>
    </li>
    <!-- eccetera -->
  </ul>
</div>

在更薄的屏幕上，它看起来很乱。

Answer 1

您正在使用“固定”关系设置您的名字的位置。只需使用position:relative；并从元素中移除固定的 top 和 left 属性。然后你可以简单地将文本对齐设置为居中。

简而言之:

color: #F235E9;
font-size: 6.25em;
text-transform: uppercase;
font-family: Oswald;
letter-spacing: 6px;
text-align: center;