Vertically align icon/element next to link

HTML & CSS
1

Hi,

I’m trying to align an icon to be vertically centered next to the text link.

I’ve tried using flex and vertical-align: middle, but it’s not working.

This is the CSS I have:

a.login-button{
	padding: 0 15px 0 0;
	color: #064882;
	text-decoration: none;	
	display: flex;
	vertical-align: middle
}

a.login-button i.icon-folder{
	font-size: 30px;
	display: flex;
	vertical-align: middle
}

and this this HTML:

<a class="login-button" href="#" data-toggle="modal" data-target="#loginmodal">
<i class="icon-folder"></i> Member Login
</a>

Can anyone see what i have wrong?

Thanks

2

I’ll fully admit to not being a flex expert (really should learn someday)… but wouldn’t vertical-align be assigned to the element containing these two elements, rather than the elements themselves?

3

“Note that float , clear and vertical-align have no effect on a flex item.”

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

2 Likes
4

align-items:center will center flex-items vertically but of course you can’t centre text exactly because space is reserved for ascenders and descenders that may be present, The font may also be created with more space at top than bottom (leading half/leading etc).

5

Vertical-align only applies to inline elements, inline-block elements and table-cells. It does not apply to block elements. Usually you apply it to each inline fragment so that you can align it with the next in line :).

3 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.