Question

我使用bootstrap制作页面。

我有两个文字，当屏幕很窄，一个在另一个之上;当屏幕足够宽时，它们会并排显示：JSBin：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <style>
    .frame {
      vertical-align: middle;
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="col-sm-6">
      <div class="frame">
        when side by side, I want this text to be in the middle vertically.
      </div>  
    </div>
    <div class="col-sm-6">
      Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile. 
    </div>
  </div>
</body>
</html>

我想要实现的一种格式是，当它们并排时，左侧文本垂直位于中间。只需在左侧文字中添加<br><br>就不是一个好选择，因为当一个人高于另一个时，我不想让<br><br>留下来。

我尝试了vertical-align: middle，但它不起作用。

有没有人有很好的方法来实现这个目标？

Answer 1

添加适当的侧边填充或设置适当的宽度，或调整块元素的行为。

Answer 2

您可以使用 CSS Flexbox 。使您的父容器成为Flex容器，如下所示：

.row {
  display: flex;
  align-items: center; /* vertically center aligns children */
}

/* On Mobiles */
@media screen and (max-width: 767px) {
  .row {
    flex-direction: column; /* On mobile change direction */
  }
}

请看下面的代码段：

＆＃13;

body {
  margin: 30px;
}

.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  flex: 1;
}

/* On Mobiles */
@media screen and (max-width: 767px) {
  .box-container {
    flex-direction: column;
  }
  
  .box {
    margin-bottom: 15px;
  }
  
  .box:last-child {
    margin-bottom: 0;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="row box-container">
    <div class="box col-sm-6">
      <div class="frame">
        when side by side, I want this text to be in the middle vertically.
      </div>  
    </div>
    <div class="box col-sm-6">
      Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile. 
    </div>
  </div>
</body>
</html>

＆＃13;

希望这有帮助！

使左侧文本垂直居中

2 个答案: