CODEWITHSUNDEEP
htmlcss
James Winfield
James Winfield

Reputation: 61

Text-Align: Center - Not Working

I am trying to use text-align: center to align my name on my DJ website - http://www.jameswinfield.co.uk/v2.html#

However it isn't working. I have a kind of fix by using left: 30% but this looks very messy on thinner screens as my name then goes into two lines and obscures the next text section.

I have tried playing with display: block and margin: 0 auto but neither seem to be working.

.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>

On a thinner screen, it looks very messy.

Upvotes: 0

Views: 97

Answers (1)

Marius K.
Marius K.

Reputation: 61

You are setting the position of your name using a "fixed" relation. Just use position: relative; and remove the fixed top and left attributes from the element. Then you can simply set the text-align to center.

In short:

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

Upvotes: 3

Related Questions