Pretty new to working with CSS and was trying to figure out ideas of what to do to have the span, which is acting the as the social media handle/label associated with the icon to be to the right side of the social media icon? I am trying to have the handle to be on the right side of the icon and to be in the center vertically as well if that makes sense. I tried playing around with the float attribute with the span, but that did not help much. My code pen is a very small snippet of what rest of the code is on purpose to achieve the small task I have in mind. I am keeping the social media icon(s) to be vertically aligned on purpose.
.pic { display: flex; align-items: center; width: 30px; height: 30px; }
<div> <a href="https://www.facebook.com/joebiden/" > <img class="pic" src="https://i.pinimg.com/originals/b7/63/69/b763699fd1fa3bfb374442593ae642e1.png"/> <span>Facebook Handle </span> </a> </div>
You should use display: flex; with row direction on the container of the two items (img and span).
display: flex;
row
img
span
Here's the code piece you can add to your stylesheet
a { display: flex; flex-direction: row; align-items: center; }
1.4m articles
1.4m replys
5 comments
56.9k users