Sprite icon and text should come in center

Hi

I am trying to get my sprite icon in center, but its coming in left, if I am removing float:left then icon is not visible, although I tried position: absolute then icon is overlapping my text.

please suggest me how I can take my icon and text in middle of the “div” or “p”.

<p>
   <label class="eDataIcon icon5"></label>
     <label class="labelFont">ABC-427<br>
                            (05/01/2014 - 06/05/2014)
     </label>
</p>
.scrollLiDiv .eDataIcon { margin-right: 5px;}
.icon5, .iconWP {    background-position: -5px -69px;    float: left;    height: 35px;    width: 36px;}
.eDataIcon {    background: transparent url("../images/eData_sprite.png") no-repeat scroll 0 0;}

Do you have a preview we can look at? It’s difficult to visualise, particularly without the image asset on-hand.

If you remove the float then the element reverts back to an inline element and inline elements cannot have dimensions defined so therefore there is no space to show your image.

If instead you use display:block then you can apply your width and height and also use auto margins to centre the element.

AS Simon said above it does all depend on what the desired outcome should look like.:slight_smile:

(Note label elements should only be used as labels for form elements and not other text snippets).

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