Question

我正在使用bootstrap，我试图将img放在包含div的中间并保持在右侧。

容器是流动的，随页面宽度而变化。

我看了一遍，无法使用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并计算正确的位置（在每个resize事件上）

（我讨厌这样做，但是css的正常行为让我疯了......）

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

1 个答案: