我正在使用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>Bootstrap中的网格系统float: left不使用display:inline-block,因此该属性vertical-align不起作用.我尝试使用margin-top它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.
我在Bootstrap 4:Bootply链接中进行了以下设置
其中带有"Supplier"文本的元素应该是垂直居中的,我有不同的行,代码相同,我希望它们居中.没有解决方案似乎对我有用.
有人可以在这里找到我做错了什么,并指出我正确的方向？
谢谢.
我是 CSS 新手，如何让 div 像这样保持在页面的中心？
<div class="container">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8 center-block">
<img class="img-responsive" id="MainCharacter" src="../Images/test_character.png" />
</div>
<div class="col-md-2">
</div>
</div>
</div>