我创建了一些浮动按钮和一个填充整个按钮的链接.但是,垂直对齐似乎不适用 – 链接文本始终位于按钮顶部< li>.
这是一个小提琴的例子:http://jsfiddle.net/su7nf/
<div id="ButtonContainer"> <ul> <li> <div class="TemplateButton"><a href="http://www.google.com">Report an Issue</a></div> </li> <li> <div class="TemplateButton"><a href="http://www.google.com">Contact Us</a></div> </li> <li> <div class="TemplateButton"><a href="http://www.google.com">Enter Project</a></div> </li> <li> <div class="TemplateButton"><a href="http://www.google.com">Request Consultation</a></div> </li> <li> <div class="TemplateButton"><a href="http://www.google.com">How to Protect Yourself From Some Really Long Text</a></div> </li> </ul> </div>
ul { list-style-type: none; } /* BUTTONS INSIDE TAB STYLING */ #ButtonContainer { margin: auto; width: 100%; overflow: auto; padding-top: 10px; padding-bottom: 10px; } #ButtonContainer > ul { padding: 0; margin: 0; } #ButtonContainer > ul > li { display: inline-block; vertical-align: bottom; } .TemplateButton { overflow: auto; vertical-align: bottom; } .TemplateButton > a { width: 119px; height: 119px; padding: 15px; float: left; background-color: pink; margin-left: 3px; margin-right: 3px; vertical-align: bottom; text-align: center; font-size: 1.25em; border: 1px solid white; border-radius: 15px; -moz-border-radius: 15px; }
解决方法
在你的标签中使用table-cell而不是float并将vertical-align更改为middle:
.TemplateButton > a { /*float: left; Remove this*/ display:table-cell; /*Add this*/ vertical-align:middle; /*Change to middle*/ }
检查这个Demo Fiddle