如何以響應方式使下面的文本位於框的中央？

Question

這是問題。.我要垂直對齊文本..

這是我對的jsfiddle ..代碼https://jsfiddle.net/AliRaza610/c5gs3Lnn/3/我想在響應網格中間的文本塊。在這個例子中，如果我改變大小的文本不再中心..我嘗試過..

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

和我在其他問題上發現的其他解決方案，但沒有一個對我有用。

Answer 1

在您的小提琴中：將text-right更改為text-center（我想這就是您要的內容）

<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 display: flex; align-items: center以包裹這些單元格的父級為display: flex; align-items: center ，然后從h1移除margin-top

 .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>