如何在bootstrap4列中垂直和水平居中此文本？
[英]How to vertically and horizontally center this text inside bootstrap4 columns?
问题描述
I have this bootstrap 4 grid with a row having a height of 200px, and two columns: 
我有这个bootstrap 4网格，其中一行具有200px的高度，并具有两列：
<div class="row" style="height:200px;background-color:grey">
<div class="col-md-10">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-md-2">
<span>This too</span>
</div>
</div>
I'm not sure how I can center the text in both columns both vertically and horizontally. 我不确定如何在垂直和水平两个栏中将文本居中。
Here is a fiddle: http://jsfiddle.net/x1hphsvb/31/ 这是一个小提琴： http : //jsfiddle.net/x1hphsvb/31/
I have looked at similar question/answers on stackoverflow, but I couldn't find an answer that actually worked in my case. 我曾在stackoverflow上查看过类似的问题/答案，但找不到适合我的案例的答案。
So how to do this? 那么该怎么做呢？
4 个解决方案
解决方案1
3 已采纳 2017-06-15 09:38:42
Using the lastest version (Bootstrap 4 alpha 6). 使用最新版本（Bootstrap 4 alpha 6）。
Use the align-items-center class to vertically centter, and text-center to horizontal center... 使用align-items-center类在垂直方向上居中， text-center在水平居中...
<div class="row text-center align-items-center" style="height:200px;background-color:grey">
<div class="col-md-10">
<span>How to center this vertically/horizontally</span>
</div>
<div class="col-md-2">
<span>This too</span>
</div>
</div>
https://www.codeply.com/go/vaGYMJHA3T https://www.codeply.com/go/vaGYMJHA3T
解决方案2
1 2017-06-15 09:16:13
You could center the text horizontally and vertically by centering the elements under both columns. 您可以通过将两列下的元素居中，将文本水平和垂直居中。
You will need to add the following three classes 您将需要添加以下三个类
d-flex justify-content-center align-items-center
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous"> </head> <div class="row" style="height:200px;background-color:grey"> <div class="col-md-10 d-flex align-items-center justify-content-center"> <span>How to center this vertically/horizontally</span> </div> <div class="col-md-2 d-flex align-items-center justify-content-center"> <span>This too</span> </div> </div>
The first class will make the columns display property become flex 第一类将使列的显示属性变为flex
解决方案3
1 2017-06-15 09:23:37
Add these as classes to your spans text-center and align-middle . 将这些作为类添加到您的span text-center和align-middle 。
The documentation for these classes can be seen here: 这些类的文档可以在这里找到：
Typography: https://v4-alpha.getbootstrap.com/utilities/typography/ 版式： https ： //v4-alpha.getbootstrap.com/utilities/typography/
Vertical Alignment: https://v4-alpha.getbootstrap.com/utilities/vertical-align/ 垂直对齐： https ： //v4-alpha.getbootstrap.com/utilities/vertical-align/
If this doesn't work, alternatively, you can add divs around the span, give them a class and give the classes the following styles: http://jsfiddle.net/x1hphsvb/32/ 如果这样做不起作用，则可以在跨度周围添加div，为它们提供一个类，然后为这些类提供以下样式： http : //jsfiddle.net/x1hphsvb/32/
.col-md-10{ height: 200px; } .col-md-2{ height: 200px; } .this-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .that-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/> <div class="row" style="height:200px;background-color:grey"> <div class="col-md-10"> <div class="this-div"> <span>How to center this vertically/horizontally</span> </div> </div> <div class="col-md-2"> <div class="that-div"> <span>This too</span> </div> </div> </div>
解决方案4
0 2017-06-15 09:37:21
Using position:relative and position:absolute plus transform:translate() . 使用position:relative和position:absolute加上transform:translate() 。
I changed col-md to col-xs so that you can see the effect in the snippet (because the snippet is small) . 我将col-md更改为col-xs以便您可以在代码段中看到效果（因为代码段很小） 。
I also added height:100% to both column so that they take the height of the parent and you can see the that the span is centered horizontally and vertically. 我还在两列中都添加了height:100% ，以便它们采用父级的高度，您可以看到span的水平和垂直居中。 This will also stay aligned even when you resize the browser 即使您调整浏览器的大小，它也将保持对齐
.col-xs-10, .col-xs-2 { position: relative; } .col-xs-10 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); } .col-xs-2 span { position: absolute; top: 50%; left: 50%; transform:translate(-50%, -50%); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="row" style="height:200px;background-color:grey"> <div class="col-xs-10" style="background-color:red;height:100%;"> <span>How to center this vertically/horizontally</span> </div> <div class="col-xs-2" style="background-color:blue;height:100%;"> <span>This too</span> </div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.