列

Question

所以我有一个用于桌面视图的一行和两列的jumbotron。行高取决于文本。我想将图像垂直居中于旁边的文本。

我使用带有两列的网格布局，并使用以下代码垂直居中图像：

＆＃13;

＆＃13;

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

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

#image-introduction {
    
    width: 100%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但结果相同，没有任何反应。

这就是目前的样子

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

Answer 1

当我需要在HTML中居中时 - css-tricks guide始终帮助我这样做。 我建议你阅读并保存下次你需要中心的东西！

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

当我问这个问题时，我认为它仍处于beta版本，但是Bootstrap 4具有新的flexbox-based utility classes，使这一过程变得容易。特别是，align-self-center可以满足您的需求：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="jumbotron bg-light">
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <h3>Text</h3>
                <p class="h4">Text</p>
                <p>Text</p>
                <p>More text</p>
                <p>Even more text</p>
                <p>Just a little more text</p>
            </div>

            <div class="col-xs-12 col-md-6 align-self-center">
                <img src="https://www.gstatic.com/images/branding/product/2x/avatar_square_grey_48dp.png">
            </div>
        </div>
    </div>
</div>

（除非该片段全屏显示，否则该片段似乎无法正常工作。）

Answer 3

#image-introduction{
    vertical-align: middle;
    position: absolute;
    top: 45%;
    left: 45%;
}
.col-md-6.col-sm-6.col-xs-6 {
    display: table-cell;
    height: auto;
    border: 1px solid black;
    float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
       <div class="parent">
        <div class="col-md-6 col-sm-6 col-xs-6">
             <img src="..." id="image-introduction">            
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div></div>

Answer 4

使用inline-block帮助程序。

.vcenter {
  display: inline-block;
  vertical-align: middle;
  float: none;
  height: 200px;
  white-space: nowrap;
}

#image-introduction {
  display: inline-block;
  vertical-align: middle;
}

.inline-block-helper {
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}

<div class="col-xs-12 col-md-6 col-sm-6 vcenter">
  <span class="inline-block-helper"></span>
  <img src="https://placehold.it/100x100" id="image-introduction">
</div>