无论我尝试啥，我都无法垂直对齐这个[关闭]

Posted 2023-03-05

【中文标题】无论我尝试啥，我都无法垂直对齐这个[关闭]

【英文标题】：No matter what I try, I can not vertically align this [closed]无论我尝试什么，我都无法垂直对齐这个[关闭]

【发布时间】：2015-07-14 09:57:32

【问题描述】：

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

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;
    

【问题讨论】：

绝对定位让我担心。我认为应该有演示。

懒人的链接。 jsfiddle.net/wtv7bgt0

上次我把它全部贴出来的时候，我被很多人骂了。我应该发布导航栏的整个代码吗？

如果你能发布一个完整的 jsfiddle 来说明你正在尝试做的事情，我们需要看看它是在什么内部垂直对齐的，这会很有帮助

jsfiddle.net/Snoop2001/q9qgckt2

【参考方案1】：

删除padding: 15px;

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

添加以下规则。

#nav li span a 
  padding: 0;

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

【讨论】：

你太棒了，非常感谢！