[英]Vertical Centre Text in DIV
I am using hosted shopping cart software which means I have limitations on what I can do with HTML (I can't edit HTML but can add new CSS styles and JavaScript). 我正在使用托管的购物车软件,这意味着我对HTML的使用有限制(我无法编辑HTML,但可以添加新的CSS样式和JavaScript)。
What I am trying to is vertically align the Link Text below (remember that the HTML is hard coded): 我要尝试的是垂直对齐下面的链接文本(请记住,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>
This is the CSS code I'm using: 这是我正在使用的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>
Is there anyway, using CSS or JavaScript, that I can align the text vertically? 无论如何,使用CSS或JavaScript,我可以垂直对齐文本吗?
EDIT: I should add that the line height method won't work because the Link Text is dynamic and might span one or 2 lines 编辑:我应该添加行高方法将不起作用,因为链接文本是动态的,可能跨越一两行
I have had an idea that it may be possible to enclose the Link Text in a DIV using JavaScript and then use CSS to style and vertically align the text. 我的想法是,可以使用JavaScript将链接文本括在DIV中,然后使用CSS设置文本样式并垂直对齐。 I have no idea how to do that though, so any ideas would be welcome! 我不知道该怎么做,所以任何想法都将受到欢迎!
I know it seems like a lot of CSS code but I have set up the link so that the DIV is clickable. 我知道这看起来像很多CSS代码,但是我已经设置了链接,以便DIV可单击。
Thanks in advance! 提前致谢!
take a look at he CSS property display:table
and vertical-align:middle
. 看一下CSS属性display:table
和vertical-align:middle
。 Also, you're repeating a lot of your style declarations...for example, the font-family declaration only needs to be written in the .ct_sc_listing_cat
class. 另外,您将重复很多样式声明...例如,仅需要将.ct_sc_listing_cat
声明为.ct_sc_listing_cat
类。
Great article that talks about one of the best ways to vertically align text via css: 很棒的文章,讨论了通过CSS垂直对齐文本的最佳方法之一:
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.