將圖像與CSS垂直並排放置文本

Question

我想將我的縮略圖圖像垂直對齊我的div - 旁邊的文本。

見的例子在這個小提琴：http://jsfiddle.net/jL5bpmp1/12/

盒2 & 3個工作很好，但1太高了股利。

我該如何解決這個問題？

* { 
 
    margin:0 
 
} 
 

 
.box { 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px; 
 
    background-color:#0f89cf; 
 
    height:55px; 
 
    width:100%; 
 
    padding:5px 0 0 0; 
 
    margin-bottom:30px 
 
} 
 

 
.box img, .box div { 
 
    /* float:left; */ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
    margin-left:10px; 
 
} 
 

 
.box h1 { 
 
    color:#fff; 
 
    font-size:18px; 
 
    margin: 0; 
 
} 
 

 
.box h1 span { 
 
    display:block; 
 
    font-size:23px; 
 
}

<div class="is-mobile"> 
 

 
<div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Chat to us online now</h1> 
 
    </div> 
 
</div> 
 

 
<div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Call the Helpline 
 
     <span>101 2333 9302</span></h1> 
 
    </div> 
 
</div> 
 

 
<div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Make a General Enquiry 
 
     <span>101 2333 9303</span></h1> 
 
    </div> 
 
</div> 
 
    
 
</div>

Answer 1

您可以使用一個表單元格顯示。

.box { 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    background-color:#0f89cf; 
    height:55px; 
    width:100%; 
    padding:5px 0 0 0; 
    margin-bottom:30px; 
    display: table; 
} 

.box div { 
    display:table-cell; 
    vertical-align:middle; 
    margin-left:10px; 
} 

，敷你的img在div

的jsfiddle：http://jsfiddle.net/jL5bpmp1/13/

Answer 2

使用position ING。因此，您可以將圖像垂直放置在頂部，使用50%偏移量，也可以使margin-top的高度爲負值。這總是有效的。

.box { 
    position: relative; 
} 
.box img { 
    position: absolute; 
    margin-left: 10px; 
    top: 50%; 
    margin-top: -15px; 
} 
.box div { 
    margin-left: 45px; 
} 

全部摘錄

* { 
 
    margin: 0 
 
} 
 
.box { 
 
    -webkit-border-radius: 20px; 
 
    -moz-border-radius: 20px; 
 
    border-radius: 20px; 
 
    background-color: #0f89cf; 
 
    height: 55px; 
 
    width: 100%; 
 
    padding: 5px 0 0 0; 
 
    margin-bottom: 30px; 
 
    position: relative; 
 
} 
 
.box img { 
 
    position: absolute; 
 
    margin-left: 10px; 
 
    top: 50%; 
 
    margin-top: -15px; 
 
} 
 
.box div { 
 
    margin-left: 45px; 
 
} 
 
.box h1 { 
 
    color: #fff; 
 
    font-size: 18px; 
 
    margin: 0; 
 
} 
 
.box h1 span { 
 
    display: block; 
 
    font-size: 23px; 
 
}

<div class="is-mobile"> 
 

 
    <div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Chat to us online now</h1> 
 
    </div> 
 
    </div> 
 

 
    <div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Call the Helpline 
 
     <span>101 2333 9302</span></h1> 
 
    </div> 
 
    </div> 
 

 
    <div class="box"> 
 
    <img src="http://placehold.it/30x30"> 
 
    <div> 
 
     <h1>Make a General Enquiry 
 
     <span>101 2333 9303</span></h1> 
 
    </div> 
 
    </div> 
 

 
</div>