存在圖像/文字對齊問題

Question

嘗試垂直對齊圖像，並根據圖像居中文本。整個卡大約300px * 200px。我希望圖像位於左側，並在右側顯示文字。

<div class="card center-block"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <div class="photo"> 
       <img class="rounded" src="../im/3.jpg" width="130" height="130" style="min-height:50px;" /> 
       } 
      </div> 
     </div> 
     <div class="col-sm-6" style="height: 250px; align-items:center"> 
      <div class="content"> 
       <h5 class="left-align"><strong>John Doe</strong></h5> 
       <p class="left-align">Software Developer</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.card { 
min-width: 350px; 
max-width: 350px; 
min-height: 200px; 
max-height: 200px; 
} 

.photo { 
padding-top: 35px; 
margin-right: 10px; 
display:inline-block; 
height: 100%; 
float: left; 
} 

.content{ 
height: 100%; 
} 

Answer 1

您可以將類添加到該行並使用Flexbox的定位。 align-items: center上保持所述2列，那麼也可以使用柔性的.content元件上，並創建一個柔性columnjustify-content: center與

.card { 
 
min-width: 350px; 
 
max-width: 350px; 
 
min-height: 200px; 
 
max-height: 200px; 
 
} 
 

 
.photo { 
 
margin-right: 10px; 
 
display:inline-block; 
 
height: 100%; 
 
float: left; 
 
} 
 

 
.special-row { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.special-row .content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    height: 100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="card center-block"> 
 
<div class="container"><div class="row special-row"> 
 
    <div class="col-sm-6"> 
 
    <div class="photo"> 
 
     <img class="rounded" src="http://androidandme.com/wp-content/uploads/2015/12/Google-Now-on-Tap.jpg"width="130" height="130" style="min-height:50px;" /> 
 
       
 
      </div> 
 
     </div> 
 
     <div class="col-sm-6 details" style="height: 250px; align-items:center"> 
 
      <div class="content"> 
 
       <h5 class="left-align"><strong>John Doe</strong></h5> 
 
       <p class="left-align">Software Developer</p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

行