我非常感谢您对我遇到的问题提供帮助。
引用:http://trs-studios.com/test
我正在尝试让 3 个框(并排)与页面中心对齐。
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> MEDIA</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> STUDIO</a>
<div class="spacer"/>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank"></i> DESIGN</a>
</div>
包装器的CSS
.wrapper {
padding-top: 100px;
text-align: center;
}
CSS 间隔符
.spacer {
display: inline;
margin: 50px 50px;
position: relative;
text-align: center;
}
如果有任何帮助,我将不胜感激!
最佳答案
忘记那些间距 div,HTML 不是用于样式设计的。
在链接上使用 display: inline-block
,您只需在链接上添加边距即可。
HTML:
<div class="wrapper">
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">MEDIA</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">STUDIO</a>
<a class="btn btn-large" href="URL TO YOUR SUBSITE" target="_blank">DESIGN</a>
</div>
CSS:
.wrapper {
text-align: center;
}
.wrapper .btn {
display: inline-block;
margin: 50px 25px;
}
关于html - 将按钮置于 div 容器内居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21707577/