Question

好的，所以我可能会对我认为应该简单的事情感到困惑。拿下面的代码，刚刚开始使用Bootstrap，所以可能不完美但足以作为例子。

<div class="row">
   <div class="col-md-12">
      <div class="col-md-4">
         <h1>Logo Text</h1>
      </div>
      <div class="col-md-8">
         <ul> Navbar.... </ul>
      </div>
   </div>
</div>

因此想象上面的代码是我的标题，我怎样才能确保徽标和导航栏的两边在各自的div中水平和垂直居中？

我怀疑我需要使用table，table-cell，vertical-align：center但这样效率还是不错？

需要保持敏感。

谢谢

Answer 1

试试这堂课：

vm.brandsConfig = {
  delimiter: '|',
  plugins: ['remove_button', 'restore_on_backspace'],
  create: true,
  openOnFocus: false,
  placeholder: 'Brands'
};

Answer 2

.vertical_align{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Answer 3

实际上我只想了一会儿。

如果我将其中一个内部div设置为此

.inner {
  height: 100px;
  display: table;

}

然后是我想要定位的实际内容

.pos {
   display: table-cell;
   text-align: center;
   vertical-align: middle;

}

所以我想这里重要的是你需要设置一个高度％或更具体的高度，以便对齐有效。当然，将整个div设置为一个表格，其中div的内容为表格单元格。

这是正确的方法吗？

Answer 4

如果你想要的只是垂直居中，你只需要设置你的padding: 10px 0;并玩弄它，直到你排好它为止。如果将clearfix类级联到col-md-8，它将有所帮助。现在，这是简短的甜蜜和简单（SSS）答案。但是你提到你现在正在使用Bootstrap。如果我是你，我会使用Bootstrap导航栏并相应地进行修改。使用这样一个强大的框架的整个想法是确保你利用它带来的所有花里胡哨，减少编码时间。

我构建了一个示例here

Answer 5

.col-md-8, .col-md-4 {
    display: flex;
    align-items: center; // Vertical
    justify-content: center; // Horizontal
}

垂直对齐bootstrap div中的内容

5 个答案: