Menu
Simple html below. The purpose is to make left span height 100% of outer div height and than center its text vertically (i.e. "abc" should become one one line with "ghi"). Result on the screenshot (chrome, win10): styles has no effect.
"row-eq-height" used to make columns of same height and are copied from here.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
</style>
</head>
<body>
<div class="container">
<div style="display: table;">
<div class="row row-eq-height">
<div class="col-md-6" style="background-color: lightblue">
<span style="height: 100%; display: inline-block; vertical-align: middle; background-color: lightgreen">abc</span>
</div>
<div class="col-md-6" style="background-color: lightcoral">
def<br/>ghi<br/>jkl
</div>
</div>
</div>
</div>
</body>
</html>
How should I fix it to make span 100% of height?
UPD: SOF's "run snippet" shows span with 100% height but not centered text. Wonder why result differs from chrome.
774
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.
Use the following style for parent div to center the text of child div/span :
style="display: flex;align-items: center;"
In your code,change the following line:
<div class="col-md-6" style="background-color: lightblue;">
into
<div class="col-md-6" style="background-color: lightblue;display: flex;align-items: center;">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With