Question

我试图将列内的内容相对于它的内联列垂直对齐，后者更高。我用语言解释起来很难，所以：这是HTML结构。

<div class="row">

    <div class="col-sm-7">
        <div class="i-need-to-be-in-the-middle">
            <!--some content-->
        </div>
    </div>

    <div class="col-sm-5">
        <div class="btns">
            <button>
                 first btn
            </button>
            <button>
                second btn
            </button>
            <button>
              third btn
            </button>
      </div><!--btns-->
   </div>

</div><!--.row-->

以下是它的样子：

这是欲望的结果：

我已经尝试了很多解决方案，但是对我来说唯一的解决方案是使用boostrap混乱，因为它们涉及绝对或弯曲元素。我还注意到第一个col的高度是相对于内容长度的，它小于按钮的高度。

Answer 1

所需要的是使列与高度相同，然后将内容对齐每个列的中心

Flexbox方法

＆＃13;

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.row {
  display: flex;
}
.column {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  justify-content: center;
}
button {
  margin: 1em;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">

    <div class="col-sm-7 column">
      <div class="i-need-to-be-in-the-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
      </div>
    </div>

    <div class="col-sm-5 column">
      <div class="btns column">
        <button>
          first btn
        </button>
        <button>
          second btn
        </button>
        <button>
          third btn
        </button>
      </div>
      <!--btns-->
    </div>

  </div>
  <!--.row-->
</div>

＆＃13;

Codepen Demo

CSS表格方法

＆＃13;

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
.table {
  display: table;
}
.column {
  float: none;
  /* remove bootstrap default */
  display: table-cell;
  vertical-align: middle;
  border: 1px solid grey;
  justify-content: center;
}
button {
  display: block;
  margin: .5em auto;
  width: 95%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row table">

    <div class="col-sm-7 column">
      <div class="i-need-to-be-in-the-middle">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate molestias soluta deserunt eligendi eius totam nisi fuga, esse sit voluptas praesentium, tempore laudantium placeat aperiam?
      </div>
    </div>

    <div class="col-sm-5 column">
      <div class="btns">
        <button>
          first btn
        </button>
        <button>
          second btn
        </button>
        <button>
          third btn
        </button>
      </div>
      <!--btns-->
    </div>

  </div>
  <!--.row-->
</div>

＆＃13;

Codepen Demo

Answer 2

试试这个：

<div class="center-vertically">
    <p>
        I'm vertically aligned.
    </p>
</div>

CSS：

.center-vertically{
    vertical-align: middle;
}

Answer 3

看起来你有一些网格问题，尝试这样的事情：

<强> HTML：

<body>
  <div class="row header">
    <div class="column column-2">Logo</div>
      <div class="column column-4">-</div>
       <div class="column column-6">
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQ</li>
        </ul>
      </div>
  </div>

  <div class="row middle">
    <div class="column column-2">Left-</div>
    <div class="column column-8">So much content.</div>
    <div class="column column-2">Right-</div>
  </div>

  <div class="row footer">
    <div class="column column-12">(c) 2016</div>
  </div>
</body>

<强> CSS：

.row {
   border: 2px solid rebeccapurple;
 }

.column {
   border: 2px solid blue;
   margin: 1%;
   float: left;
   border-radius: 20px;
   text-align: center;
}

.row:before,
.row:after {
  content: "";
  display: table;
}

.row:after {
  clear: both;
}

.row,
.column {
  box-sizing: border-box;
}

.column-1 {
  width: 6.333%;
}

.column-2 {
  width: 14.66%;
}

.column-3 {
  width: 23%;
}

.column-4 {
  width: 31.33%;
}

.column-5 {
  width: 39.66%;
}

.column-6 {
  width: 48%;
}

.column-7 {
  width: 56.33%;
}

.column-8 {
  width: 64.66%;
}

.column-9 {
  width: 73%;
}

.column-10 {
  width: 81.33%;
}

.column-11 {
  width: 89.66%;
}

.column-12 {
  width: 98%;
}

.header > .column,
.footer > .column {
  padding: 25px;
}

.middle > .column {
 height: 400px;
 line-height: 400px;
}

.header ul {
  margin: auto;
}

.header li {
  display: inline-block;
  list-style-type: none;
}

您需要做的就是编辑每个网格元素的CSS大小，你应该很好！

Bootstrap - 使第一列中的内容相对于第二列垂直对齐

3 个答案: