垂直居中文本引导
[英]Vertically Center Text Bootstrap
问题描述
我想将我的文本垂直居中
div 类 =“col-md-6”
并且有相同的高度
示例：
9 个解决方案
解决方案1
15 2017-05-26 11:36:24
检查我的代码段，它会按你的意愿工作......
.content_center { display: flex; justify-content: center; align-items: center; width: 250px; height: 150px; border : 1px solid black; }
<div class="content_center col-md-6"> What I want </div>
解决方案2
13 2017-05-26 11:47:04
定义一个自定义类并使用如下：
.vertical-align { display: flex; align-items: center; }
<div class="container"> <div class="row vertical-align"> <div class="col-md-6"><img src=" http://placehold.it/150x50" /></div> <div class="col-md-6">Dummy text</div> </div> </div>
解决方案3
12 2019-03-31 01:00:27
这是引导程序 4：
<html><head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div class="row"> <div class="col-6"> <img src="https://media.haircutinspiration.com/photos/20181204011855/boy-hairstyle-e1536810585307.jpg" class="img-fluid"> </div> <div class="col-6 align-self-center"> hello hello </div> </div> </body>
解决方案4
9 已采纳 2017-05-26 11:38:47
使用 margin-top:50%; 到正文；
.vertical{ margin-top:50%; }
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6"> <img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-responsive"> </div> <div class="col-sm-6"> <h3 class="vertical">Column 3</h3> </div> </div> </div> </body> </html>
解决方案5
4 2017-05-26 11:34:04
如果您知道高度，那么如果有单行，则将行高设置为等于 div 的高度。
如果不止一行。
HTML
<div class="col-xs-6 floatingDiv">
This should be in the middle
</div>
CSS
.floatingDiv {
display: flex;
align-items:center;
}
解决方案6
4 2017-05-26 11:44:35
尝试在您的文本元素上使用以下 css：
.className{
position: relative;
top:50%;
transform: translateY(-50%);
}
解决方案7
3 2019-05-08 11:23:05
在 Bootstrap 4 中，在父元素中使用类align-self-center 。
<div class="align-self-center">
hello hello
</div>
解决方案8
1 2017-05-26 11:44:31
<div class="col-md-6" style="height: 450px;background-color: red;">
<div class="v_align">
What i have
</div>
</div>
<style>
.v_align {
top: 50%;
transform: translateY(-50%);
position: absolute;
}
</style>
解决方案9
1 2020-12-15 11:01:56
基于现在基于 flex 的 Bootstrap 4，您可以在 Bootstrap row上使用align-items-center实用程序来垂直居中该行的内容。
例如：
<div class="container">
<div class="row align-items-center">
<div class="col-4">
<img alt="img" src="http://asianmeditour.com/assets/images/post/1542457653tourism.jpg" class="img-fluid">
</div>
<div class="col-8">
Text vertically centred!
</div>
</div>
</div>
JSFiddle在这里。
我在这里找到了align-items-center关键字。
Bootstrap文本垂直居中对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.