垂直居中文本 Bootstrap

新手上路,请多包涵

我想将我的文字 垂直 居中

股利类=“col-md-6”

并且有相同的高度

例子:

…

原文由 NeptuneZ 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 251
2 个回答

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

原文由 Yadhu Babu 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Wria Mohammed 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题