我有一个引导程序网格,我试图将一个图像(每个提供的示例为200x100)居中在单元格内。Twitter引导程序单元中图像的垂直对齐(高度未知)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
<div class="col-xs-6">
some text<br />
some text<br />
some text<br />
some text<br />
</div>
</div>
<div class="row" style="border:1px solid red;">
<div class="col-xs-6">
<img src="http://placehold.it/350x150">
</div>
<div class="col-xs-6 container">
<img class="img" src="http://placehold.it/200x100">
</div>
</div>
</div>
</body>
</html>
我已经尝试了很多提供互联网上没有任何的运气技巧。 (顺便说一句,他们大多数明确定义的高度)作为一个证明,我在这里提供他们一些:
Example1:与填充顶部的技巧:100%增加了一行,我不需要。
Example2:表/表小区只是不工作
实施例3:具有内联块和垂直对齐特技不工作
<style>
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
display: inline-block;
vertical-align: middle;
}
</style>
实施例4:绝对位置与顶部,左侧50 %和翻译工作错误
<style>
.img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
在这种情况下它不工作 – Julian