我需要在div中垂直移动文本。它与text-align一起工作,但我需要特定的位置(例如,距顶部2 px)。我尝试了绝对,相对,静态的位置;保证金;填充。它以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;

    }

最佳答案

如果要查找此输出> 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;使文本居中对齐

希望这会有所帮助!!!

关于html - 垂直移动div中的文本(文本对齐除外),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25773794/

10-12 12:51
查看更多