垂直中心文本引导程序

Question

垂直中心文本引导程序

Nep*_*neZ 8 html css css3 twitter-bootstrap-3

我想把我的文字垂直居中

div class ="col-md-6"

并具有相同的高度

例:

Answer 1

Moh*_*med 10

检查我的代码片段它会按你的意愿工作......

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

Run Code Online (Sandbox Code Playgroud)

<div class="content_center col-md-6">
What I want
</div>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Ger*_*ard 9

定义自定义类并使用如下:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

Yad*_*abu 5

使用保证金最高限额:50%; 到文本;

.vertical{
margin-top:50%;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果文本只有 1 行，效果很好，但是多行文本怎么样？（顶部边距将为 50%，但底部的空白不会为 50% (2认同)

Answer 4

Wri*_*med 5

这是引导程序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>

Run Code Online (Sandbox Code Playgroud)

Answer 5

小智 5

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	18446 次
最近记录：	6 年，3 月前