Reputation: 1880
I need to vertically align text inside div#video1
and div#video2
. What would be the way to approach that? Is the <p>
inside the div#video1
needed or useful here? Plunkr: https://plnkr.co/edit/gZ2xRBOk52F9Z1Pi4g7m?p=preview
Here's the html layout:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<section id="video">
<div class="container">
<div id="video1">
<p>Lorem Ipsum is simply dummy text<br>Lorem Ipsum has been</p>
</div>
<div id="video2">
<p>
<span id="vid-pill">Text</span>
<br>
<span>Why do we use it?</span>
<br>
<span id="vid-text">Read the text</span>
</p>
</div>
</div>
</section>
</body>
</html>
and the css rules:
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
.container{
width: 80%;
margin :auto;
overflow: hidden;
}
/* #video */
#video {
padding: 15px;
}
#video #video1 {
width: 70%;
display: inline-block;
}
#video #video1 p {
margin: 0 0 0 50%;
}
#video #video2 {
display: inline-block;
border-left: 3px solid #000;
padding: 0 0 0 5%;
}
#video #video2 #vid-pill {
background: tomato;
display: inline-block;
width: 40%;
text-align: center;
border-radius: 15px;
}
#video #video2 #vid-text {
color: tomato;
}
Upvotes: 1
Views: 4757
Reputation: 367
The foolproof / cross-browser solution that always works in vertically centering any element inside another element is the use of display: table/table-row/table-cell
and vertical-align: middle
on the child element.
Please use a table-like HTML structure like this:
<div class="like-table" style="height: 250px">
<div class="like-table-row">
<div class="like-table-cell valign-middle">
<!-- Anything in this div will always get vertically center aligned -->
<h1>This is vertically centered</h1>
</div>
</div>
</div>
And use the CSS:
.like-table { display: table }
.like-table-row { display: table-row }
.like-table-cell { display: table-cell }
.valign-middle { vertical-align: middle }
P.S. I use the above CSS classes in almost each of my projects.
Upvotes: 2
Reputation: 589
Please use following css to make your content vertical and horizontal center inside DIV
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
Upvotes: 0