Html 垂直与引导3对齐_Html_Css_Twitter Bootstrap_Twitter Bootstrap 3

Html 垂直与引导3对齐

html css twitter-bootstrap twitter-bootstrap-3

Html 垂直与引导3对齐,html,css,twitter-bootstrap,twitter-bootstrap-3,Html,Css,Twitter Bootstrap,Twitter Bootstrap 3,我正在使用Twitter Bootstrap 3，当我想垂直对齐两个div时，我遇到了一些问题，例如-：大的小的这个答案提出了一个问题，但我强烈建议您使用flexbox（如中所述），因为它现在到处都受支持演示链接： - - 您仍然可以在需要时使用自定义类： .vcenter{ 显示：内联块；垂直对齐：中间对齐；浮动：无； } 大的小的在div的CSS中尝试以下操作： display: table-cell; vertical-align: middle; 我真的发现以

我正在使用Twitter Bootstrap 3，当我想垂直对齐两个

div

时，我遇到了一些问题，例如-：


大的
小的

这个答案提出了一个问题，但我强烈建议您使用flexbox（如中所述），因为它现在到处都受支持

演示链接：
-
-

您仍然可以在需要时使用自定义类：

.vcenter{
显示：内联块；
垂直对齐：中间对齐；
浮动：无；
}


大的
小的

在div的CSS中尝试以下操作：

display: table-cell;
vertical-align: middle;

我真的发现以下代码使用Chrome而不是当前选择的答案以外的其他浏览器工作：

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

您可能需要修改高度（特别是在

.v-center

上）并删除/更改

div[class*='col-']

上的div以满足您的需要。

我遇到了同样的情况，我想垂直对齐一行中的几个div元素，发现引导类col xx将样式应用于div，如float:left

我必须在div元素上应用样式，比如style=“Float:none”，并且我的所有div元素都开始垂直对齐。以下是工作示例：

<div class="col-lg-4" style="float:none;">

以防有人想了解更多关于float属性的信息：

灵活的盒子布局随着网络技术的出现，许多网页设计师的噩梦已经得到解决。其中一个最棘手的问题是垂直对齐。现在，即使在未知高度也有可能

“二十年的布局黑客行将结束。也许明天不会，但很快，我们的余生都将如此。”

-CSS传奇在

Flexible-Box（简称Flexbox）是一种专为布局目的而设计的新布局系统。委员会：

Flex布局在表面上类似于块布局。它缺少很多的功能可以使用的更复杂的以文本或文档为中心的属性在块布局中，例如浮动和列。作为回报，它变得简单以及以多种方式分发空间和调整内容的强大工具 web应用程序和复杂的web页面通常需要

在这种情况下它有什么帮助？好吧，让我想想

垂直对齐列使用Twitter引导，我们有

.row

s和一些

.col-*

s。我们需要做的就是将所需的

.row

2显示为一个框，然后按属性垂直对齐它的所有s（列）

（请仔细阅读评论）

输出

彩色区域显示列的填充框

澄清

对齐项目：居中

可以在flex容器的当前行的方向上对齐，类似于但在垂直方向上对齐。设置所有flex容器项（包括匿名项）的默认对齐方式

对齐项目：居中
通过“中心值”，的边距框在该行内的中居中

大警戒
重要注意事项#1:Twitter引导不会指定超小型设备中列的宽度
，除非您为列指定.col xs-
类之一
因此，在这个特定的演示中，我使用了.col xs-*
类，以便在移动模式下正确显示列，因为它明确指定了列的宽度
但是，您也可以通过更改display:flex来关闭Flexbox布局至<代码>显示：块以特定屏幕大小显示。例如：
/*超小型设备（767px及以下）*/
@介质（最大宽度：767px）{
.row.vertical-align{
显示：阻止；/*关闭柔性框布局*/
}
}

或者你也可以这样：
/*小型设备（平板电脑、768px及以上）*/
@介质（最小宽度：768px）{
.row.vertical-align{
显示器：flex；
对齐项目：居中；
}
}

如果是那样的话，我会选择的
重要注意事项#2:由于简洁，省略了供应商前缀。在此期间，Flexbox语法已更改。新的书面语法在旧版本的web浏览器上不起作用（但不像InternetExplorer9那么旧！在InternetExplorer10和更高版本上支持Flexbox）
这意味着您还应该在生产模式中使用供应商前缀属性，如display:-webkit-box
等
如果在中单击“切换编译视图”，您将看到CSS声明的前缀版本（感谢）

具有垂直对齐内容的全高列
正如您在中看到的，列（flex项）不再像其容器（flex容器框。即.row
元素）那么高
这是因为对align items
属性使用了center
值。默认值为stretch
，以便项目可以填充父元素的整个高度
为了解决这个问题，您可以添加display:flex也可以添加到列：
（请再次注意评论）
。垂直对齐{
显示器：flex；
弯曲方向：行；
}
.vertical align>[class^=“col-”]，
.垂直对齐>[class*=“col-”]{
显示器：flex；
对齐项目：居中；/*垂直对齐弹性项目*/
对齐工具集：居中；/*可选，用于对齐内部弹性项目
在柱内水平*/
}

输出

彩色区域显示列的填充框
最后，但并非最不重要的一点，请注意，此处的演示和代码片段旨在为您提供不同的想法，以提供实现目标的现代方法。如果您打算在现实世界的网站或应用程序中使用此方法，请注意“大警报”部分

<
<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>

html, body {
   height: 100%;
}

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

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

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

.vertical-align {
    display: flex;
    align-items: center;
}

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

margin-top: auto;
margin-bottom: auto;

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

.display-flex-center {
    display: flex;
    align-items: center;
}

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

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

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

display: table-cell;
vertical-align: middle;

display: table;

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

<div class="d-flex align-items-center">
    ...
</div>

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="col-md-6 vertical-center">
    <div class="container">
        <div class="row">
        </div> 
    </div>   
</div>