Html 垂直居中文本引导
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44200397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertically Center Text Bootstrap
提问by NeptuneZ
I wanted to center verticallymy text inside a
我想将我的文本垂直居中
div class="col-md-6"
div 类 =“col-md-6”
and have the same height
并且有相同的高度
Example:
例子：
采纳答案by Yadhu Babu
Use margin-top:50%; to the text;
使用 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>回答by Mohideen bin Mohammed
Check my snippet it will work as you want ...
检查我的代码段，它会按你的意愿工作......
.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>回答by Gerard
Define a custom class and use as follows:
定义一个自定义类并使用如下：
.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>回答by Wria Mohammed
this is bootstrap 4:
这是引导程序 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>回答by Nithin Charly
If you know the height, then set line height equal to height of div if there is single line.
如果您知道高度，那么如果有单行，则将行高设置为等于 div 的高度。
If more than one line.
如果不止一行。
HTML
HTML
<div class="col-xs-6 floatingDiv">
This should be in the middle
</div>
CSS
CSS
.floatingDiv {
display: flex;
align-items:center;
}
回答by Shneor
in Bootstrap 4, use the class align-self-centerin the parent element.
在 Bootstrap 4 中，在父元素中使用类align-self-center。
<div class="align-self-center">
hello hello
</div>回答by Bhuwan
Try following css on your text element:
尝试在您的文本元素上使用以下 css：
.className{
position: relative;
top:50%;
transform: translateY(-50%);
}
回答by Arun
<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>
