Vertically align single DIV(img) within parent DIV
Question
I'm using bootstrap and am trying to get the img in the middle of the containing div and stay on the right hand side.
The container is fluid and changes with the width of the page.
I have looked all over and cannot work it out using CSS or JS.
I have tried transforms and table align but I cannot get anything to work.
Apologies for the newbie question I have literally spent hours on this.
<!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>
1 answers
solution1
0 2016-03-07 23:17:21
I had similar problems.
One solution would be setting the style of the container to
style=" position:absolute; top:40%; right:0px;"
So your box would be not really in the middle, but nearly. If you want to do it exactly, you can use js and calculate the right position (on every resize event)
(I hated to do this, but the normal behavior of css was driving me insane ... )
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.