我需要在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 1</a>
</li>
<li>
<a class="nav5" data-tab="#football_ch2" id="link-football_ch2" href="#football_ch2">Channel 2</a>
</li>
<li>
<a class="nav6" data-tab="#football_ch3" id="link-football_ch3" href="#football_ch3">Channel 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/