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添加到包含这些单元格的父级，然后从margin-top

中删除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>

如何以响应方式在框中心制作下面的文字？

2 个答案: