如何以响应的方式在盒子的中心制作以下文本？

Question

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

这是我上的jsfiddle代码.. https://jsfiddle.net/AliRaza610/c5gs3Lnn/3/ 我想在响应网格中间的文本块。在这个例子中，如果我改变大小的文字是在中心不再.. 我曾试图..

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

和其他的解决方案，我在其他的问题，但他们没有为我工作发现..

Answer 1

在提琴： 改变文本的正确文本中心（我想这是你所要求的）

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

Answer 2

我想补充display: flex; align-items: center到包装这些细胞中的父母，然后从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>