I know that vertical alignment is a common problem and I found a lot of posts on this already. However, none of these solutions seem to work for me :(
I want to use the bootstrap grid to align an image and some text next to each other if there is enough space. If not (mobile), it should be on top of each other. This works very well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"<
<div class="row">
<div class="col-sm-3">
<img style="width:100%; padding: 10px;" src="https://www.thespruce.com/thmb/cVMUwfKW1bVBrSGXla8A7aiFUlo=/960x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/duck-big-bill-59ef8e5068e1a2001072c89e.jpg">
</div>
<div class="col-sm-9">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
</body>
Desktop:
Mobile:
Now i want to vertically center the image. I did this with flexbox by changing the the div with class="row" to:
<div class="row" style="display:flex; align-items:center">
This works well on desktop:
But not at all in the mobile version:
So the question is: How can I vertically center the image while keeping the bootstrap grid behaviour that stacks the objects onto each other on small screens?
Cheers!