2016-03-07 58 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的正常行为让我疯狂......)