我有一個引導程序網格,我試圖將一個圖像(每個提供的示例爲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