user6039980 user6039980 - 5 months ago 22x
CSS Question

CSS: How to align text, next to image inside a span?

I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class: {
background-image: url('');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;

<span class="my-profile">My Full Name</span>

However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?

Thanks in advance.


Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.