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