Vertical Align text and icon in a button WordPress

• SOLVED

I have a button that I wish to create, and seems easy so far. However I need the div to force the text and the icon to be vertical-align: middle. This seems to not want to do it. For now I have used margin to cheat my way out of the situation, but I see a problem coming up when the text will be sometimes 3 lines tall.

Please see the screenshot of what I wish to try and replicate.

Below is my CSS and HTML so far.

<strong>HTML</strong>

<div class="third-button">
<div class="btn-txt">Our Services</div>
<div class="btn-icon"><img src="http://countryhomeservices.org.au/wp-content/uploads/dynamik-gen/theme/images/button-arrow-green-30px-right.png" width="30" height="30" /></div>
</div>


<strong>CSS</strong>

/*----BUTTON STYLES----*/
.third-button {
min-height:110px;
max-height:110px;
border-radius:11px;
background: #00c473;
background: -webkit-linear-gradient(left, #00c473 0%,#6fc399 100%);
background: -o-linear-gradient(left, #00c473 0%,#6fc399 100%);
background: -ms-linear-gradient(left, #00c473 0%,#6fc399 100%);
background: linear-gradient(to right, #00c473 0%,#6fc399 100%);
}

.btn-txt {
margin: 34px 0 0 20px;
text-align: center;
float: left;
color: #fff;
font-family: 'Arvo', serif;
font-size: 27px;
}

.btn-icon {float:right; margin:34px 20px 0 0;}


Answers (3)

2013-09-27

Arnav Joy answers:

try this

<div class="third-button">
<table class="txt_img" border="0" >
<tr><td><div class="btn-txt">Our Services</div></td>
<td><div class="btn-icon"><img src="http://countryhomeservices.org.au/wp-content/uploads/dynamik-gen/theme/images/button-arrow-green-30px-right.png" width="30" height="30" /></div</td></tr>
</table>




</div>

<style>
table.txt_img tr td{ vertical-align:middle}
</style>

---

Ciaran Whelan comments:

Hi Arnav... I assume you got my message a few days ago RE the issue with posting questions with the field pre populated with porn spam?

-----------------

I have tried your option of having a table, and it is nearly there. However you can see in the screenshot attached something just doesn't seem to sit right.

Your markup is used on the right button, and Bhuvanesh markup used on the left button.