2016-03-07 109 views
0

我正在使用bootstrap,並試圖在包含div的中間獲取img並保持在右側。在父DIV中垂直對齊單個DIV(img)

容器是流體並且隨頁面寬度而變化。

我已經看遍了所有,不能使用CSS或JS工作。

我試過轉換和表對齊,但我無法獲得任何工作。

對於新手問題的道歉我在字面上花了幾個小時。

Example

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<script src="js/slideout.min.js"></script> 
<script src="js/jquery-1.11.3.min.js"></script> 
<script src="js/bootstrap.js"></script> 
<meta name="viewport" content="width=divice-width, initial-scale=1.0"> 
</head> 
<body> 

<div class="bg-info shadow col-xs-12"> 
<div class="col-xs-8 left" style="font-size:4vw"> 
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. 
</div> 

<div class="col-xs-4"> 
<img src="images/png/webredesign.png" style="width:80%;"> 
</div> 
</div> 

<div class="bg-info shadow col-xs-12"> 
<div class="col-xs-4"> 
<img src="images/png/webredesign.png" style="width:80%;"> 
</div> 

<div class="col-xs-8 left" style="font-size:4vw"> 
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. 
</div> 
</div> 
</body> 
</html> 
+0

您是否嘗試過Css中的垂直對齊屬性? – JoeyG

回答

0

我有類似的問題。

一個解決辦法是容器的樣式設置爲

style=" position:absolute; top:40%; right:0px;" 

所以你的盒子會在中間不是真的,但近。 如果你想準確地做到這一點,你可以用js和計算正確的位置(在每個調整事件)

(我討厭這樣做,但CSS的正常行爲讓我瘋狂......)