Bootstrap 在列中垂直对齐 [英] Bootstrap Vertical align in Column

查看：22
本文介绍了Bootstrap 在列中垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我有一个用于桌面视图的一排两列超大屏幕.行高取决于文本.我想将图像垂直居中到旁边的文本.

我为此使用带有两列的网格布局和以下代码来垂直居中图像:

#jumbotron-introduction {背景颜色:白色；}#p-介绍{字体大小:16px；}#图像介绍{宽度:100%；}.vcenter {显示:弹性；对齐项目:居中；对齐内容:居中；}

<div class="jumbotron" id="jumbotron-introduction"><div class="row"><div class="col-xs-12 col-md-6 col-sm-6"><h3>...</h3><p id="p-介绍">...</p>
<div class="col-xs-12 col-md-6 col-sm-6 vcenter"><img src="图片/..." id="图片介绍">

但没有任何变化，图像仍然位于列顶部的中心.我还尝试了以下代码:

.vcenter {显示:内联块；垂直对齐:中间；}

但结果是一样的，什么也没发生.

现在的样子

但我希望它看起来像这样:

解决方案

当我需要在 HTML 中居中​​时 - css-tricks guide 总是帮助我这样做.我建议您阅读并保存以备下次需要居中时使用！

对于您的问题，您可以使用 flexbox 实现所需的结果 -将 .vcenter 显示设置为 flex，以便您可以使用 align-items 属性.

.jumbotron__container {显示:弹性；背景:#fff;}.jumbotron__text {弹性:1 0 50%；填充:10px；右边框:1px纯黑色；}.jumbotron__image {显示:弹性；弹性:1 0 50%；对齐项目:居中；对齐内容:居中；}

<div class="jumbotron" id="jumbotron-introduction"><div class="jumbotron__container"><div class="jumbotron__text"><h3>洛伦和伊普苏姆</h3><p id="p-介绍">多勒姆和史密斯<p>
<div class="jumbotron__image"><img src="图片/..." id="图片介绍">

So I have a jumbotron with one row and two columns for Desktop view. The row height depends on the text. I want to center an image vertically to the text beside.

I'm using a grid layout with two columns for this and following code to vertically center the image:

#jumbotron-introduction {
    
    background-color: white;
}

#p-introduction {
    
    font-size: 16px;
}

#image-introduction {
    
    width: 100%;
}

.vcenter {
    
    display: flex;
    align-items: center;
    justify-content: center;
}

<div class="container">
        <div class="jumbotron" id="jumbotron-introduction">
            <div class="row">
                <div class="col-xs-12 col-md-6 col-sm-6">
                    <h3>...</h3>
                    
                    <p id="p-introduction">...</p>
                </div>
                <div class="col-xs-12 col-md-6 col-sm-6 vcenter">
                    <img src="Images/..." id="image-introduction">
                </div>
            </div>
        </div>
    </div>

But nothing changes, the image is still centered on the top of the column. I also tried the following code:

.vcenter {
    
  display: inline-block;
  vertical-align: middle;
}

But it's the same result, nothing happens.

Thats how it looks like at the moment

But I want it to look like this:

解决方案

When ever I need to center something in HTML - the css-tricks guide is always help me to do so. I suggest you read and save it for next time you need to center something!

For your question, you can achieve the desired result using flexbox - Set the .vcenter display to flex, so you can use the align-items property.

.jumbotron__container {
  display: flex;
  background: #fff;
}

.jumbotron__text {
  flex: 1 0 50%;
  padding: 10px;
  border-right: 1px solid black;
}

.jumbotron__image {
  display: flex;
  flex: 1 0 50%;
  align-items: center;
  justify-content: center;
}

<div class="container">
        <div class="jumbotron" id="jumbotron-introduction">
        <div class="jumbotron__container">
          <div class="jumbotron__text">
            <h3>Loren And Ipsum</h3>
            <p id="p-introduction">Dolum And Smith<p>
          </div>
          <div class="jumbotron__image">
            <img src="Images/..." id="image-introduction">
          </div>
        </div>
        </div>
    </div>

这篇关于Bootstrap 在列中垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆