cssを使用してブートストラップのイメージdivの横にテキストdivを垂直に配置するにはどうすればよいですか？

Question

div内に画像とテキストがあり、画像divとテキストdivをCSSを使用して行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コード例は、ブートストラップの構造に基づいては

Answer 1

あなたはこのようなあなたの.right-image-sectionクラスを変更する必要があります：私はあなたのためのいくつかのリンクを発見した

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

Answer 2

ましたあなたが望むものを達成するためにできることをindディテールで説明してください。ベストソリューションは、とにかく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>