垂直移动div中的文本（text-align除外）

Question

我需要垂直移动div中的文本。它使用text-align但我需要特定的位置（例如从顶部2 px）。我尝试了绝对，相对，静态的位置;保证金;填充。它与div没有文字一起移动。我创建了简单的示例jsfiddle。有可能吗？

Html代码：

<div class="usp">
    <ul id="menu1">
        <li>
            <a class="nav4" data-tab="#football" id="link-football" href="#football">Channel&nbsp;1</a>
        </li>
        <li>
            <a class="nav5" data-tab="#football_ch2" id="link-football_ch2" href="#football_ch2">Channel&nbsp;2</a>
        </li>
        <li> 
            <a class="nav6" data-tab="#football_ch3" id="link-football_ch3" href="#football_ch3">Channel&nbsp;3</a>
        </li>
    </ul>
</div>

的CSS：

#menu1  {
    width: 100px;
    height:70px;
    display:block;
    list-style:none;
    z-index:3;

 }  
#menu1 a{   
    color:#3D3D3D;   
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif   ; 
    letter-spacing: -0.035em;
    display: block;
    line-height: 28px;  /*29*/
    text-align:left;
    padding: 0px 20px;
    margin-bottom: 3px;
    font-size:0.922em; /*895*/
    font-weight:bold;
    opacity:0.90;   /*88 or 91*/
    border-top-left-radius: 4px;    /*6*/
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: 1px 0px 30px 0px rgba(51, 50, 50, 1);
    -moz-box-shadow:    1px 0px 30px 0px rgba(51, 50, 50, 1);
    box-shadow:         1px 0px 30px 0px rgba(51, 50, 50, 1);
 }  
 #menu1 a:visited {  


 } 

 #menu1 a:hover {  
    color: #fff;
    background-color:#333333;
 }  
.usp{
    margin-top:70px;
    margin-left:190px;

    }

Answer 1

如果您正在寻找此输出＆gt; http://jsfiddle.net/9af6bLwp/

只需删除＆＃34; line-height: 28px; ＆＃34;

根据要求添加填充padding: 0 0 10px;

以下是更新后的代码：

#menu1 a {
    color: #3D3D3D;
    font-family:"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    letter-spacing: -0.035em;
    display: block;
    /* line-height: 28px; */
    text-align: center; /*CHANGED*/
    margin-bottom: 5px;
    font-size: 0.922em;
    font-weight: bold;
    opacity: 0.90;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: 1px 0px 30px 0px rgba(51, 50, 50, 1);
    -moz-box-shadow: 1px 0px 30px 0px rgba(51, 50, 50, 1);
    box-shadow: 1px 0px 30px 0px rgba(51, 50, 50, 1);
    padding: 0 0 10px; /*CHANGE THE TOP PADDING AS PER YOUR NEED*/
}

此外，只是为了纠正更多的事情，将您正在使用的文字居中对齐代码：

text-align:left; /*Aligned text to left*/
padding: 0px 20px; /*Added 20px Padding to Left and Right to push the text to look like center */

我只是将左右填充更改为＆＃34; 0＆＃34;，并使用text-align: center;

使文本对齐中心

希望这会有所帮助!!!