Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to align image on the center

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #45615
    dvd707
    Member

    Hello CSS experts!

    I have the following problem with the CSS. :

    #rateMe a {
    background: url(“images/empty_star.png”) no-repeat scroll 0 0 transparent;
    float: left;
    height: 20px;
    width: 20px;
    }

    This CSS belongs to the rating stars. You can see the live example here: [Online 3D games](http://www.all3dgames.net/3d-shooting-games/tactics-zombie “Online 3D Games”)

    As you can see under the thumbnail there is a rating system but it is moved to the left.

    I want the rating stars to be displayed on the center, like this image [Picture Link](http://s11.postimg.org/64o7gt9vz/centered.jpghttp://s11.postimg.org/64o7gt9vz/centered.jpg”)

    I have tried text-align: center but it didn’t help. The strange thing is that with text-align I was able to center the rating system after voting.

    Any suggestion? Thanks in advance

    Dave

    #139128
    wolfcry911
    Participant

    text-align, as you’ve discovered, has no effect on background images. The two numbers in the background shorthand property are for the background position. So values of 50% 0 (or center top) would align the image’s center with the center of the element.

    Note also that you have set the anchor to float, which won’t center but push the element to the side if smaller than the parent. Is this width the same as the parent? If not, the background image may center on the anchor, but the anchor will not center in the parent, so the image will never appear to center.

    #139222
    Paulie_D
    Member

    I’d go with this..or something like it.

    http://codepen.io/Paulie-D/pen/gbnAu

    #139272
    dvd707
    Member

    @Paulie_D, thanks! The problem is that i’m using google page speed up service and for this reason css and images are compressed. thats why the css doesnt display the new css.I think i will have to reset the stuff.

    Thanks!

    #139275
    Sarfaraj
    Participant

    First of all remove “float:left;” and then add “display:inline-block;” in your CSS.
    That’s very useful to you.

    #139278
    Paulie_D
    Member

    @Sarfaraj Which is precisely what I suggested.

    #139282
    Sarfaraj
    Participant

    @Paulie_D Yes you are absolutely right.

    #139289
    dvd707
    Member

    Thanks guys! @Paulie_D Thanks a lot!

    #139317
    bablucolno
    Participant

    @Paulie_D Thanks is good solution for me also :)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.