Question

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

然而它不起作用。我使用左边有一种解决方法：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

您正在使用＆＃34;固定＆＃34;设置姓名的位置。关系。只需使用position：relative;并从元素中删除固定的顶部和左侧属性。然后你可以简单地将text-align设置为center。

简而言之：

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

文字对齐：中心 - 不工作

1 个答案: