我正在使用Twitter Bootstrap 3,当我想垂直对齐时我遇到问题div
,例如 - JSFiddle链接:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
Bootstrap中的网格系统float: left
不使用display:inline-block
,因此该属性vertical-align
不起作用.我尝试使用margin-top
它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.
http://jsfiddle.net/corinem/TtPgy/
我正在使用:
<a href="">Lorem ipsum dolor.</a>
Run Code Online (Sandbox Code Playgroud)
CSS:
a{text-indent:-9999px;}
Run Code Online (Sandbox Code Playgroud)
......但这不起作用.例如<p>
,当我使用另一个标签时,它可以正常工作.
我也尝试添加overflow:hidden
css,但它仍然无法正常工作.我认为这个css属性有一个概念错误.