Question

我在div中有一个图像和一些文本，我想使用CSS将图像和文本div放在行div的垂直中心。问题是我不知道我会有多少行文字，但文字和图片必须始终在中间。例如，当只有一行文本时，div应如下所示：

####################################
#  _______                         #
# |       |                        #
# |       |                        #
# | IMAGE |    text text text      #
# |       |                        #
# |_______|                        #
#                                  #
####################################


and if more than one lines than it should looking like this:

####################################
#                                  #
#              text text text      #
#  _______     text text text      #
# |       |    text text text      #
# |       |    text text text      #
# | IMAGE |    text text text      #
# |       |    text text text      #
# |_______|    text text text      #
#              text text text      #
#              text text text      #
#                                  #
####################################

这里我有jsfiddle，这是我的代码，我想在附加的小提琴上解决这个问题。

jsfiddle：https://jsfiddle.net/vh3ewa54/
注意：此jsfiddle代码示例基于Bootstrap结构

Answer 1

您应该像这样修改.right-image-section类：

.right-image-section {
    padding: 100px 100px 100px 140px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

Answer 2

我为您找到了一些链接，详细解释了您可以做些什么来实现您的目标：最佳解决方案是使用flexbox。

Answer 3

的变化： .only-right-image .big-text .small-text .paddimg-set-right-image

.only-right-image {
float: left;}

.big-text {
font-size: 40px;
font-family: "Helvetica Light",Helvetica,sans-serif;
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}

.small-text {
font-size: 17px;
margin-top: 20px;
font-family: "Helvetica Light", Helvetica, sans-serif;
line-height: 1.5;
vertical-align: middle;
}

.paddimg-set-right-image {
padding: 0 15px 0 0 !important;
text-align: center;line-height: 200px;
height: 200px;
}

Answer 4

＆＃13;

.dis-flex{
       height:auto;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
         padding: 100px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="container dis-flex">
          <div class=" col-lg-7 col-md-7 col-sm-7 col-xs-7">
            <img src="https://fakeimg.pl/500x500/" alt="built" class="img-responsive  all-image-small" title="built-image">
            </div>
    
          <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 ">
             <h3>
               It's built like a tank.
             </h3>
              <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
            <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
            <p>
                  Thick aluminium panels are precision machined on a latest gen 5-axis CNC machine The .al looks and feels like a piece of precision engineering.
            </p>
          </div>
        </div>

＆＃13;

如何使用css在bootstrap中的图像div旁边垂直居中文本div？

4 个答案: