tofutim tofutim -4 years ago 73
CSS Question

Aligning text with floated :before icon

I am working on a button style for Azure Active Directory B2C. Azure automatically provides the following content

<div class="options">
<div>
<button class="accountButton firstButton" id="AmazonExchange" tabindex="1">Amazon</button>
</div>
<div>
<button class="accountButton" id="LinkedInExchange" tabindex="1">LinkedIn</button>
</div>
<div>
<button class="accountButton" id="FacebookExchange" tabindex="1">Facebook</button>
</div>
<div>
<button class="accountButton" id="GoogleExchange" tabindex="1">Google+</button>
</div>
<div>
<button class="accountButton" id="MicrosoftAccountExchange" tabindex="1">Microsoft</button>
</div>
</div>


Using FontAwesome and :before css magic, I am able to add an icon, and fix width the button

.accountButton {
border: 1px solid #FFF;
color: #FFF;
margin-left: 0;
margin-right: 2px;
padding-right: 15px;
transition: background-color 1s ease 0s;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
text-align: center;
word-wrap: break-word;
width: 120px;
background-color: #5x05050;
opacity: 0.7;
}

#AmazonExchange:before {
font-family: fontAwesome;
content: "\f270";
//font-size: large;
float:left;
width:32px;
text-align: center;
}


enter image description here

This is nice, but I would like the icons to be just a bit bigger. However, increasing the size of the FontAwesome item to large causes the primary text to go up, as it is aligned to the top of the float:left.

enter image description here

I've tried a variety of valign combinations with no luck. I cannot change the html (as it is dynamically generated). How can I center the "Amazon" with the larger icon? (Notice that the Amazon text is now higher than the LinkedIn and other text.)




Attempted jsfiddle, doesn't look quite the same, but should show the issue.
https://jsfiddle.net/tofutim/0637yknj/9/

Answer Source

There isn't a dynamic way to adjust valign with floating elements. You can either use display: inline-block; + vertical-align: middle;

.accountButton {
  vertical-align: middle;
  line-height: 1.5;
}
.accountButton:before {
  vertical-align: middle;
  margin-right: 8px;
}

jsFiddle

Or, use display: flex; + align-items: center;

.accountButton {
  display: flex;
  align-items: center;
  line-height: 1.5;
}
.accountButton:before {
  margin-right: 8px;
}

jsFiddle

The line-height part is just to make the buttons a bit taller, you can also use padding-top + padding-bottom instead.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download