文字对齐：居中-不起作用

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

您正在使用“固定”关系设置名称的位置。 只是使用位置：相对； 并从元素中删除固定的top和left属性。 然后，您可以简单地将文本对齐方式设置为居中。

简而言之：

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