I need assistance with centering text horizontally next to an image inside a container div that is 40px x 40px. The anchor tag contains the image with matching dimensions, and below it is a span with text. I've tried using text-align: center, adjusting position elements, and setting margins to auto in CSS, but haven't been successful. Any tips would be greatly appreciated.
HTML:
<div class="crsContainer">
<a class="crsIcon" onclick="return false">
<img id="" src="'.$crsRow['iconURL'].'"/>
</a>
<span class="crsTitle">'.$crsRow['courseTitle'].'</span>
</div>
CSS:
.crsContainer{
width: 40px;
height: 40px;
position: absolute;
-webkit-transition: all 1s;
text-align: center;
cursor: pointer;
display: inline-block;
}
.crsIcon{
position: relative;
display: inline-block;
}
.crsTitle{
position: relative;
top: 5px;
white-space: nowrap;
margin: 0 auto;
color: #3d3d3d;
text-align: center;
}