我正在使用托管的购物车软件,这意味着我对HTML可以做什么有限制(我不能编辑HTML,但可以添加新的CSS样式和JavaScript)。
我试图垂直对齐下面的链接文本(请记住,HTML是硬编码的):
<div id="ct_sc_listing">
<div class="ct_sc_listing_cat">
<div class="ct_sc_listing_cat_name"><a href="#">Link Text</a></div>
</div>
</div>
这是我正在使用的CSS代码:
<style type="text/css">
#ct_sc_listing
{
margin: 0px;
padding: 0px;
float: left;
width: 100%;
}
.ct_sc_listing_cat {
position: relative;
width: 150px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #336;
font-size: 24px;
text-decoration: none;
background-color: #DFEBEB;
text-align: center;
float: left;
display: inline-block;
padding: 5px;
height: 150px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0px;
}
.ct_sc_listing_cat a:link {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #006;
font-size: 24px;
text-decoration: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
}
.ct_sc_listing_cat:visited, .ct_sc_listing_cat a:visited {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #006;
font-size: 24px;
text-decoration: none;
}
.ct_sc_listing_cat:hover, .ct_sc_listing_cat:hover a{
background-color: #006;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #DFEBEB;
font-size: 24px;
text-decoration: none;
}
.ct_sc_listing_cat:active, .ct_sc_listing_cat a:active {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #FFF;
font-size: 24px;
}
</style>
无论如何,使用CSS或JavaScript,我可以垂直对齐文本吗?
编辑:我应该补充说,线高方法无法正常工作,因为链接文本是动态的,并且可能跨越一条或2行
我有一个想法,可以使用JavaScript将链接文本包装在DIV中,然后使用CSS来样式和垂直对齐文本。我不知道该怎么做,因此欢迎任何想法!
我知道这似乎是很多CSS代码,但是我已经设置了链接,以便DIV可单击。
预先感谢!
很棒的文章,谈论通过CSS垂直对齐文本的最佳方法之一:
http://zerosixthree.se/vertical-align-anything-with-just-just-3-lines-of-css/
查看He CSS属性display:table
和vertical-align:middle
。另外,您正在重复许多样式声明...例如,字体家庭声明仅需要在.ct_sc_listing_cat
类中写入。