与Bootstrap 3垂直alignment
我使用的是Twitter Bootstrap 3,当我想垂直alignment两个div
时,我遇到了问题 – 例如JSFiddle链接 :
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <div class="row"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div>
Bootstrap中的网格系统使用float: left
,而不是display:inline-block
,所以属性vertical-align
不起作用。 我试着用margin-top
来修复它,但是我觉得这不是一个很好的解决scheme。
这个答案提出了一个黑客,但我强烈build议你使用flexbox(如@Haschem答案中所述 ),因为它现在到处都支持(闭嘴I9)
演示链接:
– Bootstrap 3
– Bootstrap 4 alpha 6
当你需要的时候,你仍然可以使用自定义的类:
.vcenter { display: inline-block; vertical-align: middle; float: none; }
<div class="row"> <div class="col-xs-5 col-md-3 col-lg-1 vcenter"> <div style="height:10em;border:1px solid #000">Big</div> </div><!-- --><div class="col-xs-5 col-md-7 col-lg-9 vcenter"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div>
灵活的盒子布局
随着CSS Flexible Box的问世,很多网页devise师的噩梦1已经解决了。 其中一个最hacky,垂直alignment。 现在甚至可能在未知的高度 。
“二十年的布局黑客即将结束,也许不是明天,而是很快,而且是我们的余生。”
– 在W3Conf 2013的 CSS传奇Eric Meyer
柔性盒(或简称为Flexbox)是一种专为布局而devise的新版式系统。 规范规定 :
Flex布局与块布局表面相似。 它缺less许多可以在块布局中使用的更复杂的以文本或文档为中心的属性,例如浮动和列。 作为回报,它可以获得简单而强大的工具来分发空间并以web应用程序和复杂的网页经常需要的方式alignment内容。
在这种情况下它有什么帮助? 那么,让我们看看。
垂直alignment的列
使用Twitter Bootstrap,我们有一些.col-*
s。 我们所需要做的就是将所需的.row
2显示为一个弹性容器框,然后通过align-items
属性将其所有弹性项目 (列)垂直align-items
。
示例 (请仔细阅读注释)
<div class="container"> <div class="row vertical-align"> <!-- ^-- Additional class --> <div class="col-xs-6"> ... </div> <div class="col-xs-6"> ... </div> </div> </div>
.vertical-align { display: flex; align-items: center; }
输出
彩色区域显示列的填充框。
明确align-items: center
8.3横轴alignment:
align-items
属性柔性物品可以在柔性容器的当前线的横轴上alignment,类似于
justify-content
但是在垂直方向上。align-items
为所有flex容器的项目(包括匿名flex项目)设置默认alignment方式。
align-items: center;
按中心值, 弹性项目的边距框在线内的交叉轴上居中。
大警报
重要说明#1:除非您将.col-xs-#
类别中的一个指定给列,否则Bootstrap不会指定特殊小型设备中列的width
。
因此,在这个特定的演示中,我使用了.col-xs-*
类,以便在移动模式下正确显示列,因为它明确指定了列的width
。
但是也可以通过更改display: flex;
closures Flexbox布局display: flex;
display: block;
在特定的屏幕尺寸。 例如:
/* Extra small devices (767px and down) */ @media (max-width: 767px) { .row.vertical-align { display: block; /* Turn off the flexible box layout */ } }
或者你可以指定.vertical-align
只在特定的屏幕尺寸,如下所示:
/* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { .row.vertical-align { display: flex; align-items: center; } }
在那种情况下,我会用凯文·尼尔森的方法 去做 。
重要说明#2:由于简洁,省略了供应商前缀。 Flexbox语法在此期间已更改。 新的编写语法不适用于旧版本的Web浏览器(但不像Internet Explorer 9!Internet Explorer 10及更高版本支持Flexbox)。
这意味着您还应该在生产模式下使用供应商前缀的属性,如display: -webkit-box
等。
如果你点击Demo中的“Toggle Compiled View” ,你会看到CSS声明的前缀版本(感谢Autoprefixer )。
具有垂直alignment内容的全高列
正如你在前面的演示中看到的那样 ,列(flex项目)不再像它们的容器(flex容器盒,即.row
元素)一样高。
这是因为使用align-items
属性的center
值。 默认值是stretch
以便项目可以填充父元素的整个高度。
为了解决这个问题,你可以添加display: flex;
也列:
在这里举个例子 (再次介绍评论)
.vertical-align { display: flex; flex-direction: row; } .vertical-align > [class^="col-"], .vertical-align > [class*=" col-"] { display: flex; align-items: center; /* Align the flex-items vertically */ justify-content: center; /* Optional, to align inner flex-items horizontally within the column */ }
输出
彩色区域显示列的填充框。
最后但并非最不重要的一点 ,请注意,这里的演示和代码片段是为了给你一个不同的想法,提供一个现代化的方法来实现目标。 如果您要在真实世界的网站或应用程序中使用此方法,请介意“ 大提示 ”部分。
为了进一步阅读,包括浏览器支持,这些资源将是有用的:
- Mozilla开发者networking – 灵活的盒子
- Flexbox指南 – CSS技巧
- HTML5Rocks – 快速的Flexbox
- SmashingMagazine – 用Flexbox定位元素
- 菲利普·沃尔顿 – 由Flexbox解决
- 我可以使用:灵活的箱子布局模块
1. 将div内的图片与响应高度垂直alignment 2.最好使用额外的类,以便不改变Twitter Bootstrap的默认.row
。
试试这在div的CSS:
display: table-cell; vertical-align: middle;
遵循接受的答案,如果您不希望自定义标记,分离问题或仅仅因为您使用CMS,则以下解决scheme可以正常工作:
.valign { font-size: 0; } .valign > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; }
<link href="bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row valign"> <div class="col-xs-5"> <div style="height:5em;border:1px solid #000">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div>
下面的代码为我工作:
.vertical-align { display: flex; align-items: center; }
我想我会分享我的“解决scheme”,以防止其他人不熟悉@media查询自己。
感谢@ HashemQolami的回答,我build立了一些媒体查询,这些查询可以像col- *类一样移动,这样我就可以将col- *堆叠起来用于移动,但是在大屏幕的中间显示它们垂直alignment,例如
<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; } }
更复杂的布局,每个屏幕分辨率需要不同数量的列(例如,2行用于-xs,3用于-sm,4用于-md等)需要一些更高级的finagling,但对于带-xs的简单页面堆叠和-sm和更大的行,这工作正常。
我更喜欢这个方法按照David Walsh垂直中心CSS :
.children{ background: #ffdb4c; height: 300px; position: relative; top: 50%; transform: translateY(-50%); }
transform
不是必需的; 它只是更准确地发现中心。 因此,Internet Explorer 8可能会稍微偏移一些,但它仍然不错 – 我可以使用 – 转换2d 。
我只是做了这个,它做我想做的事情。
.align-middle { margin-top: 25%; margin-bottom: 25%; }
现在我的页面看起来像
<div class='container-fluid align-middle'> content ---------------------------------- | | | -------------------------- | | | | | | | | | | | | | | | | | | | | | | -------------------------- | | | ----------------------------------
我真的发现下面的代码使用Chrome浏览器,而不是其他浏览器比当前select的答案:
.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; }
Bootply链接
您可能需要修改高度(特别是.v-center
),并根据您的需要删除/更改div[class*='col-']
上的div[class*='col-']
。
我遇到了同样的问题。 在我的情况下,我不知道外部容器的高度,但这是我如何修复它:
首先为你的html
和body
元素设置高度,使它们为100%。 这个很重要! 没有这个, html
和body
元素将简单地inheritance他们孩子的身高。
html, body { height: 100%; }
然后我有一个外部容器类与:
.container { display: table; width: 100%; height: 100%; /* For at least Firefox */ min-height: 100%; }
最后是带有class的内部容器:
.inner-container { display: table-cell; vertical-align: middle; }
HTML就像下面这样简单:
<body> <div class="container"> <div class="inner-container"> <p>Vertically Aligned</p> </div> </div> </body>
这是所有你需要垂直alignment的内容。 检查它在小提琴:
的jsfiddle
如果您使用的是较低版本的Bootstrap,并且自己编译为CSS,则可以使用一些实用程序类与Bootstrap类一起使用。
我发现这些工作非常好,我希望保留Bootstrap网格系统的响应性和可configuration性(就像使用-md
或-sm
),但我希望给定行中的所有列都具有相同的垂直高度(这样我就可以垂直alignment它们的内容,并使行中的所有列共享一个共同的中间)。
CSS /减:
.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; }
HTML:
<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>
2017年更新
我知道最初的问题是Bootstrap 3,但现在Bootstrap 4在alpha中,这里是一些关于垂直中心的更新指导。
Bootstrap 4
现在, 默认情况下 BS4,Alpha 6是flexbox,有许多不同的垂直alignment方法: 自动边距 , flexbox utils ,或者显示器utils以及vertical alignment utils 。 起初“垂直alignment应用程序”似乎是显而易见的,但这些只适用于内联和表格显示元素。 这里有一些Bootstrap 4垂直居中选项..
1 – 使用自动边距的垂直中心:
垂直居中的另一种方法是使用my-auto
。 这将使元素在其容器中居中。 例如, h-100
使行全高, my-auto
将垂直居中col-sm-12
列。
<div class="row h-100"> <div class="col-sm-12 my-auto"> <div class="card card-block w-25">Card</div> </div> </div>
垂直中心使用自动边距演示
my-auto
表示垂直y轴上的边距,相当于:
margin-top: auto; margin-bottom: auto;
2 – 带有Flexbox的垂直中心:
由于Bootstrap 4 .row
现在display:flex
您可以简单地使用任何列上的align-self-center
垂直居中…
<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>
或者,在整个.row
上使用align-items-center
垂直居中alignment行中的所有列。
<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>
垂直中心不同高度的列演示
3 – 垂直中心使用显示器Utils:
引导程序4具有可用于显示的显示实用程序display:table
, display:table-cell
, display:inline
等。这些可以与垂直alignment应用程序一起使用,以alignment内联,内嵌块或表格单元格元素。
<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 Utils Demo的垂直中心
我在zessx的答案上详细阐述了一下,以便在不同的屏幕尺寸下混合不同的色谱柱尺寸时更易于使用。
如果你使用Sass ,你可以把它添加到你的scss文件中:
@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);
其中生成以下CSS(如果不使用Sass,则可以直接在样式表中使用):
@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>
不需要表和表格单元格。 它可以通过变换轻松实现。 例如: http : //codepen.io/arvind/pen/QNbwyM
码:
.child { height: 10em; border: 1px solid green; position: relative; } .child-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
<link href="bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="row parent"> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:4em;border:1px solid #000">Big</div> </div> </div> <div class="col-xs-6 col-lg-6 child"> <div class="child-content"> <div style="height:3em;border:1px solid #F00">Small</div> </div> </div> </div>
好吧,我不小心混合了一些解决scheme,现在终于适用于我的布局,我尝试使用最小分辨率的Bootstrap列制作3×3表格。
/* required styles */ #grid a { display: table; } #grid a div { display: table-cell; vertical-align: middle; float: none; } /* additional styles for demo: */ body { padding: 20px; } a { height: 40px; border: 1px solid #444; } a > div { width: 100%; text-align: center; }
<link href="bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div id="grid" class="clearfix row"> <a class="col-xs-4 align-center" href="#"> <div>1</div> </a> <a class="col-xs-4 align-center" href="#"> <div>2</div> </a> <a class="col-xs-4 align-center" href="#"> <div>3</div> </a> <a class="col-xs-4 align-center" href="#"> <div>4</div> </a> <a class="col-xs-4 align-center" href="#"> <div>5</div> </a> <a class="col-xs-4 align-center" href="#"> <div>6</div> </a> <a class="col-xs-4 align-center" href="#"> <div>7</div> </a> <a class="col-xs-4 align-center" href="#"> <div>8</div> </a> <a class="col-xs-4 align-center" href="#"> <div>9</div> </a> </div>
div{ border:1px solid; } span{ display:flex; align-items:center; } .col-5{ width:100px; height:50px; float:left; background:red; } .col-7{ width:200px; height:24px; float:left; background:green; }
<span> <div class="col-5"> </div> <div class="col-7"></div> </span>
有几种方法可以做到这一点
1。
display: table-cell; vertical-align: middle;
和容器的CSS来
display:table;
-
使用填充与媒体屏幕相对于屏幕大小更改填充。 谷歌@media屏幕了解更多
-
使用相对填充,即指定填充%
希望它有帮助
使用Bootstrap 4(目前在alpha中),你可以使用.align-items-center
类。 所以你可以保持Bootstrap的响应特性。 为我而努力。 请参阅Bootstrap 4文档 。
尝试这个,
.exe { font-size: 0; } .exe > [class*="col"] { display: inline-block; float: none; font-size: 14px; font-size: 1rem; vertical-align: middle; }
<link href="bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="row exe"> <div class="col-xs-5"> <div style="height:5em;border:1px solid grey">Big</div> </div> <div class="col-xs-5"> <div style="height:3em;border:1px solid red">Small</div> </div> </div>
自从Bootstrap以来,Flex行为本身就被支持了4. row
div中添加d-flex align-items-center
。 你不再需要修改你的CSS。
简单的例子: http : //jsfiddle.net/vgks6L74/
<!-- 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>
用你的例子: http : //jsfiddle.net/7zwtL702/
<!-- 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>
来源: https : //getbootstrap.com/docs/4.0/utilities/flex/
我遇到了同样的情况,我想在一行中垂直alignment几个div元素,发现Bootstrap类col-xx-xx将style作为float:left应用于div。
我不得不应用风格的div元素,如style =“Float:none”,所有我的div元素开始垂直alignment。 这是一个工作的例子:
<div class="col-lg-4" style="float:none;">
JsFiddle链接
以防万一有人想了解更多关于浮动资产的信息: