Forums

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

Home Forums CSS How to center image with position: absolute;

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #246775
    wolfgang1983
    Participant

    I have a bootstrap image and a svg is behind that image.

    I am trying to center the whole image with the svg so it all in the middle

    My text below it is centered but cannot get image and svg to middle.

    How can I get it so every thing is centered?

    http://codepen.io/wolfgang1983/pen/ALmdBL

    #246776
    Beverleyh
    Participant

    You could wrap #image in a div and give the div position:relative; display:inline-block;

    Then also give .wrapper text-align:center;

    #246793
    wolfgang1983
    Participant

    Not worked.

    #246794
    Beverleyh
    Participant

    Well, it works for me http://codepen.io/anon/pen/zKyKJv

    Or do you mean something else?

    #246849
    deb
    Participant

    do it like:
    .wrapper img { left: 50%; transform: translate(-50%,0); position: absolute; z-index: 1 }

    this will center align the img.

    #246850
    Beverleyh
    Participant

    .wrapper img { left: 50%; transform: translate(-50%,0); position: absolute; z-index: 1 }


    @deb
    – Unfortunately that only centres the blue bar around the edge. The grey circular base doesn’t budge from the left.

    #246952
    deb
    Participant

    Ok without affecting his code, lets use this:

    add

    .wrapper { text-align: center }
    .wrapper img { left: 50% !important; transform: translate(-50%,0); position: absolute; z-index: 1 }

    This will work for sure, i have checked on given codepen.

    #246955
    Beverleyh
    Participant

    Hmmm, not really. I think you should check the effect of your code on the alignment of all component elements.

    #246956
    deb
    Participant

    oh yeah.. i didn’t notice that svg, then i think we should do:

    .wrapper { margin: 0 auto; width: 175px }

    I was only trying for quick fix. :)

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