[HTML / CSS] a태그(Link) 내에 있는 text를 세로 중앙 정렬하기

Code

// Styling
a {
	display: flex;
	align-items: center;
}
span {
	padding-top: 4px;
}

// The Part of HTML or React Redner
<Link to={`/${linkPath}`}>  // a 태그 역할. 동일하게 동작한다.
	<img src={`imgURL`} />
	<span>{name}</span>
</Link>

 

a태그에서 가운데 정렬은 모두 끝난다.

그러나 Font 자체의 여백이 있기 때문에 이를 조절하려면,
결국 padding을 주는 수 밖에 없다.
Font의 여백에 따라 padding-top or bottom을 주면 된다.

 

Render

padding-top 

Not padding-top