在父DIV中垂直对齐单个DIV（img）

Question

我正在使用引导程序，并试图在包含div的中间获取img并停留在右侧。

容器是不固定的，会随着页面的宽度而变化。

我已经四处张望，无法使用CSS或JS解决问题。

我已经尝试过转换和表对齐，但是我什么都无法工作。

对于新手问题，我为此付出了数小时的歉意。

例

<!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>

Answer 1

我有类似的问题。

一种解决方案是将容器的样式设置为

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

因此，您的盒子不会真正位于中间，而是几乎位于中间。 如果您想准确地做到这一点，则可以使用js并计算正确的位置（在每次调整大小事件时）

（我讨厌这样做，但是CSS的正常行为使我发疯了……）