How to vertically center a text irrespective of the content

Question

I have three div elements having the same styles.the content inside the div is dynamic as you can see below

Current

how to make the text center inside each div like below

Expected

.sample{
     padding:15px;
    width:150px;
    height:70px;
    float: left;
    color:#fff;
    background-color:#3498db;
    margin-bottom:20px;
    text-align:left;
    text-align:center;
    line-height:normal;
    margin-right:10px;
}

<div class="sample"> Some text </div>
<div class="sample"> A little more text is added </div>
<div class="sample"> This text is large compared to other sample divs </div>

Your answer should be found in a previous thread: https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically. — JCJ, Oct 31 '17 at 14:57
using `display:flex;` . but why you use `text-align:left` and also `text-align:center` ? — Mihai T, Oct 31 '17 at 14:57

score 0 · Accepted Answer · answered Oct 31 '17 at 14:57

Using flex is very simple. All you have to do is add: display: flex, align-items: center and justify-content: center

.sample{
     padding:15px;
    width:150px;
    height:70px;
    float: left;
    color:#fff;
    background-color:#3498db;
    margin-bottom:20px;
    text-align:left;
    text-align:center;
    line-height:normal;
    margin-right:10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="sample"> Some text </div>
<div class="sample"> A little more text is added </div>
<div class="sample"> This text is large compared to other sample divs </div>

Code dropping is frowned upon .. Please EXPLAIN your answer .. — Zak, Oct 31 '17 at 14:58

How to vertically center a text irrespective of the content

1 Answers1