Question

我想做的是垂直对齐这个文字，它已经成为一场巨大的斗争。任何帮助将不胜感激。

HTML：

    <ul id="nav">
        <li>
            <a href="web2home.html">HOME</a>
            <span>See who Matthew H. Goodman is</span>
        </li>
        <li>
            <a href="web2cv.html">CV</a>
            <span>View his current Curriculum Vitae</span> 
        </li>
        <li>
            <a href="#">RESEARCH</a>
            <span id="spectab"><a href="#">Current work</a></span>
            <span id="spectab2"><a href="#">Presentations</a></span
        </li>
        <li>
            <a href="web2con.html">CONTACT</a>
            <span>Send an email directly to Matthew</span>
        </li>
    </ul>

CSS：

    #nav li #spectab{
      transition: all 1s;
      position: absolute;
      left: -300px;
      display: block;
      width: 175px;
      background-image: url("http://www.diiiz.com/variant/Argent%C3%A9.jpg"); 
      z-index: -1;
      border-radius: 10px;
      color: white;
      font-size: 20px;
      padding: 0px;
      overflow: hidden;
    }

Answer 1

删除padding: 15px;

#nav li a:hover {
  color: #778899;
  display: block;
  /* padding: 15px; */
}

添加以下规则。

#nav li span a {
  padding: 0;
}

http://jsfiddle.net/q9qgckt2/1/

无论我尝试什么，我都无法垂直对齐

1 个答案: