簡體   English   中英

如何將文字和圖片垂直居中對齊

[英]How do I center aligned vertically the text with my image

我正在嘗試將文字與圖片垂直居中對齊。 當前,文本看起來像在圖像底部對齊。

這是我的jsfiddle: http : //jsfiddle.net/hus​​kydawgs/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/L5Le0w37/16/

您可以使用絕對定位將事物准確放置在所需的位置。

小提琴: 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM