CSS noob?
- Started
- Last post
- 4 Responses
- Knuckleberry
Is there a way to center an image vertically and horizontally with CSS while also using a linear transition (fade)?
Everything I find doesn't seem to do this.
Thank you in advance.
- ok_not_ok0
var win = $(window);
win.resize(function(){
var width = win.width();
var height = win.height();content.css({
left : width / 2 - content.outerWidth() / 2,
top : height / 2 - content.outerHeight() / 2
});}).trigger("resize");
- adev0
<div class="image"></div>
.image {
width: 1000px;
height: 1000px;
background: url('www.pic.jpg') no-repeat center center;
transition: opacity 500ms ease-in-out;
*insert -moz/-webkit/whatever prefixes*
}obviously it wont scale the image...
- Stugoo0
could also.
<div class="hold">
<img>
</div>.hold { width: 1000px; height :1000px; position:relative; }
.hold img{ position : absolute; top : 50%; left:50%; width: 200px; height: 200px; margin : -100px 0 0 -100px; }seeing as your calling yourself a noob a couple of points to note:
.hold can be any width/height.
img is positioned absolutley, relative to .hold.
with top/left values at 50%, the margin needs to be negative 50% of the width to offset it.hope this makes sense, im sans coffee.
- ORAZAL0
@Stugoo
You forgot to add azimuth : behind;- I see what you did thereStugoo
- yes - don't forget to add azimuth : behind;alicetheblue