CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Vitaly Trifanov
Vitaly Trifanov

Reputation: 631

Make span height 100% of outer div height

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>

Chrome result

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.

Upvotes: 5

Views: 11917

Answers (2)

Ayan
Ayan

Reputation: 8886

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;">

Upvotes: 6

Siddharth
Siddharth

Reputation: 869

you can use div instead of span, but giving span display:block can do the trick

<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;
        }
         span{
           display:block;
         }
    </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>

Upvotes: 1

Related Questions