How to align a div with an image horizontally within another div

Question

I am having a lot of trouble creating a button in css. Here is how it needs to work:

The button needs to have two sections, one for the call to action text, and the other with a right facing arrow. This button needs to be dynamic, in the sense that it will be used in a content management system so it needs to expand it's height.

The right arrow needs to be lined up vertically with the text in the middle, however I cannot seem to achieve this.

Here is my 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>

And here is my 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%;
}

I have attached an image as well, to see how it should look.

CSS BUTTON

RIGHT ARROW

Thank you for any replies.

Answer 1

Since you're using display: table on the parent, you want the direct children to be display: table-cell if you want them to work well and use the vertical-align property as a table would.

Added display: table-cell to .assetbuttonIcon and gave that element a padding to separate the text from the icon.

 .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

nothing much you need to do. simply remove all the vertical-align property from all the css section. add vertical-align: middle .assetbuttonIcon img{ } img class. check the snippet below and here is a livefiddle

 .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>