文字對齊：居中-不起作用

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;