如何在另一個div中將div與圖像水平對齊

Question

我在CSS中創建按鈕時遇到很多麻煩。 它的工作方式如下：

該按鈕需要包含兩個部分，一個部分用於號召性文字，另一部分帶有向右的箭頭。 從某種意義上說，此按鈕需要動態使用，因為它將在內容管理系統中使用，因此需要擴大其高度。

右箭頭需要與中間的文本垂直對齊，但是我似乎無法實現這一點。

這是我的HTML：

    <div class="assetbuttonWrap">
  <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div><div class="assetbuttonIcon"><img src="images/arrow_right.png" width="8" height="12" alt="arrow"></div></div>

這是我的CSS

.assetbuttonWrap {
    border: none;
    padding: 12px 14px 12px 14px;
    margin-top:12px;
    height:100%;
    background-color: #dddddd;
    display:table;
}
.assetbuttonWrap:hover {
    background-color: #B6B6B6;
    cursor:pointer;
}
a.assetbuttonText:link {
    text-decoration:none;
    color: #666;
}

.assetbuttonText {
    color: #737373;
    display: inline-block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    max-width: 93%;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;
}
.assetbuttonIcon {
    vertical-align: middle;
    display:inline-block;
    max-width:10%;
}

我還附加了一張圖片，以查看其外觀。

CSS按鈕

右箭頭

感謝您的任何答復。

Answer 1

由於在父級上使用display: table ，因此希望直接子級display: table-cell如果您希望它們正常工作，並像表一樣使用vertical-align屬性。

在.assetbuttonIcon添加了display: table-cell ，並為該元素添加了填充以將文本與圖標分開。

 .assetbuttonWrap { border: none; padding: 12px 14px 12px 14px; margin-top: 12px; height: 100%; background-color: #dddddd; display: table; } .assetbuttonWrap:hover { background-color: #B6B6B6; cursor: pointer; } a.assetbuttonText:link { text-decoration: none; color: #666; } .assetbuttonText { color: #737373; font-size: 16px; font-style: normal; font-weight: 700; line-height: 19px; max-width: 93%; text-align: left; text-decoration: none; vertical-align: middle; display: table-cell; } .assetbuttonIcon { vertical-align: middle; display: table-cell; max-width: 10%; padding-left: .5em; } 

 <div class="assetbuttonWrap"> <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div> <div class="assetbuttonIcon"><img src="https://i.stack.imgur.com/Wxy1A.png" width="8" height="12" alt="arrow"></div> </div> 

Answer 2

您不需要做任何事情。 只需從所有css部分中刪除所有vertical-align屬性。 添加vertical-align：中間.assetbuttonIcon img {} img類。 檢查下面的代碼片段，這是一個小提琴

 .assetbuttonWrap { border: none; padding: 12px 14px 12px 14px; margin-top:12px; height:100%; background-color: #dddddd; display:table; } .assetbuttonWrap:hover { background-color: #B6B6B6; cursor:pointer; } a.assetbuttonText:link { text-decoration:none; color: #666; } .assetbuttonText { color: #737373; font-size: 16px; font-style: normal; font-weight: 700; line-height: 19px; max-width: 93%; text-align: left; text-decoration: none; display: table-cell; } .assetbuttonIcon { display:inline-block; max-width:10%; } .assetbuttonIcon img{ vertical-align:middle; padding-left: 10px; } 

  <div class="assetbuttonWrap"> <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div> <div class="assetbuttonIcon"><img src="https://i.stack.imgur.com/Wxy1A.png" width="8" height="12" alt="arrow"></div> </div>