Question

我想将垂直我的文字放在

中

div class =＆＃34; col-md-6＆＃34;

并且具有相同的高度

示例：

Answer 1

检查我的代码片段，它会按您的意愿运作...

for col in df.columns:
    print (df[col])
silverine     1
fire          2
ice          11
wind          4
poisonous     2
Name: Arrows :Current, dtype: int64
silverine     0
fire          2
ice          12
wind          4
poisonous     2
Name: Arrows:previous 1M, dtype: int64
silverine     0
fire          2
ice          10
wind          4
poisonous     9
Name: Arrows:previous 2M, dtype: int64

.content_center {
  display: flex;
  justify-content: center;
  align-items: center; 
  width: 250px;
  height: 150px;
  border : 1px solid black;
}

Answer 2

定义自定义类并按如下方式使用：

.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>

Answer 3

使用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>

Answer 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>

Answer 5

如果你知道高度，那么如果有单行，则设置行高等于div的高度。

如果不止一行。

HTML

<div class="col-xs-6 floatingDiv">
    This should be in the middle
</div>

<强> CSS

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

Answer 6

尝试在文字元素上使用css：

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

Answer 7

在Bootstrap 4中在父元素中使用 align-self-center 类。

<div class="align-self-center">
    hello hello
</div>

Answer 8

<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>

Answer 9

您能否使用div或列的代码css中心文本

.row.flex-override {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
}
.row.flex-override > .vertical-align-center {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}
.row.flex-override .vertical-align-center .valign-center {
  align-self: center;
}

此处的Verry代码：How to center text vertically in a Bootstrap

Answer 10

基于现在基于Flex的Bootstrap 4，您可以在Bootstrap align-items-center上使用row实用程序来垂直居中显示行的内容。

例如：

<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 here。

我发现了align-items-center关键字here。

垂直中心文本引导程序

10 个答案:

HTML