- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
You could wrap #image in a div and give the div position:relative; display:inline-block;
Then also give .wrapper text-align:center;
Not worked.
Well, it works for me http://codepen.io/anon/pen/zKyKJv
Or do you mean something else?
do it like:
.wrapper img { left: 50%; transform: translate(-50%,0); position: absolute; z-index: 1 }
this will center align the img.
.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.
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.
Hmmm, not really. I think you should check the effect of your code on the alignment of all component elements.
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. :)