Issue
I have three divs in a row. The first div will receive content dynamically. According to the height of my first div, i need to align the content of second and third div vertically middle. I use bootstrap classes for my div.
I expect output like below. Can somebody help.
.parent {
position: relative;
}
.child {
position: absolute;
margin: 0;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parent">
<div class="col-lg-3 child">
<p>It is a dynamic content</p>
<p>Sample</p>
<p>Sample</p>
<p>Sample</p>
</div>
<div class="col-lg-3 child">
<p>Static content which needs to be aligned vertically middle</p>
</div>
<div class="col-lg-3 child">
<p>Sample</p>
</div>
</div>Solution
I used only Boostrap classes - vertically centered with align-items-center class and horizontal center with justify-content-center class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="row d-flex align-items-center justify-content-center">
<div class="col-lg-3">
<p>It is a dynamic content</p>
<p>Sample</p>
<p>Sample</p>
<p>Sample</p>
</div>
<div class="col-lg-3">
<p>Static content which needs to be aligned vertically middle</p>
</div>
<div class="col-lg-3">
<p>Sample</p>
</div>
</div>
</body>
</html>
Answered By - Nakov Answer Checked By - David Goodson (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.