如何垂直对齐bootstrap

Question

我在col中有一个文本，我想知道如何将此文本放在col的中间。

<div class="container-fluid">
  <div class="row">
        <div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
        <div class="col-xs-7 ">Perfile</div>
        <div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
  </div>

Answer 1

试试这个。

1. 在课程行中添加样式=＆＃34; text-align：center＆＃34;
2. 然后改变class =＆＃34; col-xs-2＆＃34;，class =＆＃34; col-xs-7＆＃34;，class =＆＃34; col-xs-3＆＃34; to class =＆＃34; col-xs-12＆＃34;

        Perfile      

Answer 2

引导。如何垂直对齐菜单的内容

我有四种解决方案。第一个要求图像高度相同。在另外三个图像中，图像的高度可能不同。

1。行高

您可以为文字设置属性line-height。 line-height必须等于图像的高度。当文本占据一行并且图像具有相同的高度时，它是合适的。

＆＃13;

＆＃13;

.put-in-the-middle {
  line-height: 80px; /* = height of the picture.png */
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="pull-left"><img src="http://placehold.it/80x80/69c/fff/" alt="Menu"></div>
    <div class="pull-right"><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
    <div class="put-in-the-middle text-center">Perfile</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

2。表细胞

您可以转换表格单元格中的块。然后将vertical-align: middle;应用于他们。

＆＃13;

＆＃13;

.transform-in-a-table {
  display: table;
}
.transform-in-a-table div {
  display: table-cell !important;
  vertical-align: middle;
}
.make-it-wide {
  width: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row transform-in-a-table">
    <div><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></div>
    <div class="make-it-wide text-center">Perfile</div>
    <div><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

3。 HTML表格

＆＃13;

＆＃13;

.make-it-wide {
  width: 100%;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<table>
  <tr>
    <td><img src="http://placehold.it/80x40/c69/fff/" alt="Menu"></td>
    <td class="make-it-wide text-center">Perfile</td>
    <td><img src="http://placehold.it/120x80/9c6/fff/" alt="Menu"></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

4。 inline-block + text-align-last

您可以使用vertical-align with Bootstrap 3中包含属性text-align-last的想法。

＆＃13;

＆＃13;

.vertical-middle {
  text-align-last: justify;
}
.vertical-middle > div,
.vertical-middle > img {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row vertical-middle">
    <img src="http://placehold.it/80x40/c69/fff/" alt="Menu">
    <div>Perfile</div>
    <img src="http://placehold.it/120x80/9c6/fff/" alt="Menu">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用引导类text-center将元素置于列

中心

<div class="container-fluid">
  <div class="row">
        <div class="col-xs-2 "><img src="images/header/picture.png" alt="Menu"></div>
        <div class="col-xs-7 text-center">Perfile</div>
        <div class="col-xs-3"><img src="images/header/picture.png" alt="Menu"></div>
  </div>