大佬教程收集整理的这篇文章主要介绍了html – div内的垂直对齐链接,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是一个小提琴的例子: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; }
.TemplateButton > a { /*float: left; Remove this*/ display:table-cell; /*Add this*/ vertical-align:middle; /*Change to middle*/ }
检查这个Demo Fiddle
以上是大佬教程为你收集整理的html – div内的垂直对齐链接全部内容,希望文章能够帮你解决html – div内的垂直对齐链接所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。