html - 垂直移动 div 中的文本(文本对齐除外)

Question

我需要垂直移动 div 中的文本。它与文本对齐一起使用，但我需要特定的位置(例如距离顶部 2 像素)。我尝试了绝对位置，相对位置，静态位置；利润 ;填充。它随 div no 和文本一起移动。我创建了简单示例 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

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

只需删除“ line-height: 28px; ”

并根据要求添加填充 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 */

我只是将左右内边距更改为“0”，并使用 text-align: center;

使文本居中对齐

希望这会有所帮助!!!