![](/img/trans.png)
[英]How can I get my image to be vertically aligned in the center with respect to a dynamic div on it's left?
[英]How do I center aligned vertically the text with my image
我正在嘗試將文字與圖片垂直居中對齊。 當前,文本看起來像在圖像底部對齊。
這是我的jsfiddle: http : //jsfiddle.net/huskydawgs/L5Le0w37/7/
這是我的HTML:
<div class="column-resources-box">
<a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>
<h4 class="title-bar">Apple<br>
Center</h4>
<ul>
<li>Gala</li>
<li>Pink Lady</li>
<li>Fuji</li>
</ul>
</div>
Here's my CSS:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
h4.title-bar {
color: #2251a4;
background: none;
font-family: 'Arial', inherit;
font-weight: normal;
text-transform: none;
line-height: normal;
margin: 0;
padding: 0;
text-align: left;
}
試試看 我包裝了兩個要在div中居中的項目,然后將圖像居中。
.wrap { display:inline } .apple_image { vertical-align:middle } .column-resources-box { width: 200px; float: left; margin: 15px; } .column-resources-box img { margin:0 2%; float:left; height:50px; width:50px; } } h4.title-bar { color: #2251a4; background: none; font-family: 'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; }
<div class="column-resources-box"> <div class="wrap"> <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /> </a> <h4 class="title-bar">AppleCenter</h4> </div> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div>
CSS中存在語法錯誤。 這是您的CSS,摘自頂部:
.column-resources-box {
width: 200px;
float: left;
margin: 15px;
}
.column-resources-box img {
margin:0 2%;
float:left;
height:50px;
width:50px;
}
}
注意無關緊要的括號。 這似乎阻止了瀏覽器訪問其余的CSS。
固定: http : //jsfiddle.net/L5Le0w37/13/
您可以將其向下移動一點以使其與position:relative; top:7px;
居中position:relative; top:7px;
position:relative; top:7px;
:
您可以使用絕對定位將事物准確放置在所需的位置。
小提琴: http : //jsfiddle.net/t8rL871j/
.column-resources-box { width: 200px; float: left; margin: 15px; position: relative; } .column-resources-box img { margin:0 2%; height:50px; width:50px; position: absolute; } h4.title-bar { color: #2251a4; background: none; font-family:'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; position: absolute; top: 10px; left: 60px; } .column-resources-box ul { margin:60px 2%; height:50px; width:70px; position: absolute; }
<div class="column-resources-box"> <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> <h4 class="title-bar">Apple<br> Center</h4> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div>
我稍微重寫了您的代碼,但這是使用頂部填充的另一種可能方式。
vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */
http://jsfiddle.net/Hastig/mj5yzsr7/3/
您可以調整與蘋果和中心之間的間距h4.title-bar { line-height: 25px; }
h4.title-bar { line-height: 25px; }
然后調整頂部填充以進行補償。
將您的文本和圖像包裝在div
內,並設置其樣式,如下所示:
HTML
<div class="appleWrapper">
<a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>
<h4 class="title-bar">Apple<br>Center</h4>
</div>
CSS
.appleWrapper {
height: 50px;
}
.title-bar {
margin: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.