我使用的是托管购物车软件,这意味着我对 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,我可以垂直对齐文本吗?
编辑:我应该补充一点,行高方法不起作用,因为链接文本是动态的,可能跨越一两行
我想到可以使用 JavaScript 将链接文本包含在 DIV 中,然后使用 CSS 设置样式并垂直对齐文本。我不知道该怎么做,所以欢迎任何想法!
我知道它看起来像很多 CSS 代码,但我已经设置了链接以便 DIV 可以点击。
提前致谢!
最佳答案
很棒的文章,讨论了通过 css 垂直对齐文本的最佳方法之一:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
关于javascript - DIV 中的垂直居中文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21267900/