相关疑难解决方法(0)

与Bootstrap 3垂直对齐

我正在使用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它来修复它,但我认为这对于响应式设计来说不是一个好的解决方案.

html css css3 twitter-bootstrap twitter-bootstrap-3

cor*_*nem

2015 11-26

860
推荐指数

16
解决办法

140万
查看次数

如何将图像排成一行,无论高度和流体宽度如何都在中间垂直对齐？

我正在尝试创建一些并排排列的流体图像,但也应该在中间垂直对齐,无论高度尺寸是多少,我都将图像设置为最大宽度:100%因此它们保持不变在他们的父母最大宽度内,所以我可以在较小的屏幕宽度减少这些尺寸.然而,我的问题是,我不确定垂直对齐这些图像的最佳方法,有人可以建议吗？

CSS

.img-ctn {
    display: inline-block;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
}

.img-ctn > img {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: middle;
}

Run Code Online (Sandbox Code Playgroud)

小提琴: http ://jsfiddle.net/xmJ3R/

css

sty*_*ler

lucky-day

2
推荐指数

1
解决办法

1万
查看次数