如何使用CSS在引导程序中将文本div垂直居中放置在图像div旁边？

Question

我有一个图像和div内的一些文本，我想将图像和文本div放在行div的垂直中心使用CSS。问题是我不知道我会有多少行文字，但文字和图像必须始终在中间。例如，如果只有一个行文本的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代码示例基于引导结构

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。

• How can I make Bootstrap columns all the same height?
• http://getbootstrap.com.vn/examples/equal-height-columns/
• https://www.w3schools.com/howto/howto_css_equal_height.asp（旧有表格的布局）

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

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

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