如何以响应方式使下面的文本位于框的中央？

Question

Here is the Problem.. I want to vertically Align the text..

Here is my Code on jsfiddle.. https://jsfiddle.net/AliRaza610/c5gs3Lnn/3/ I want the text block in the middle in responsive grid.. In this example if I change the size the text is no longer in center.. I had tried..

display:table-cell;
vertically-align: middle;

and other solution that I found on other question but none of them work for me..

Answer 1

in your fiddle: change text-right to text-center (i guess that is what you are asking)

<div class="col-md-4 col-sm-6 col-xs-6 text-center">
    <h1>Lorem Ipsum</h1>
    <h4>Is Simply Dummy</h4> ........

Answer 2

I would add display: flex; align-items: center display: flex; align-items: center to the parent that wraps those cells, then remove the margin-top from the h1

 .hp-laptop-deal { border: 3px solid #eaeaea; box-sizing: border-box; margin-top: 2em; margin-bottom: 2em; display: flex; align-items: center; } .hp-laptop-deal h1 { text-transform: uppercase; font-weight: 900; font-size: 2.5em; margin-top: 0; } .hp-laptop-deal h4 { text-transform: uppercase; font-size: 1.5em; letter-spacing: -2px; } .hp-laptop-deal p { font-size: 0.85em; font-weight: 600; text-transform: uppercase; } @media (max-width:768px) { .hp-laptop-deal img { margin-top: 1em; } .hp-laptop-deal h1 { font-size: 1.25em; } .hp-laptop-deal h4 { margin-top: 0.75em; font-size: 1em; letter-spacing: 0px; line-height: 0%; } .hp-laptop-deal p { line-height: 100%; font-weight: normal; font-size: 0.75em; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row hp-laptop-deal"> <div class="col-md-8 col-sm-6 col-xs-6"> <img src="https://s14.postimg.org/ydjwm4xc1/first-fold-hp-laptop.jpg" alt="" class="img-responsive"> </div> <div class="col-md-4 col-sm-6 col-xs-6 text-right"> <h1>Lorem Ipsum</h1> <h4>Is Simply Dummy</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p> </div> </div>