Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 30
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Is there a way to center an image if it is positioned absolutely?

    I have a bunch of images on a page (only one is visible at a time, with jQuery) that make a slideshow. The slideshow is working fine, but the images (all of the exact same size) aren't centering in the page no matter what I try. I am starting to think it's because the images are absolutely positioned but I need them to be absolutely positioned for something else to work on the page. Is there any way to center an image that is absolutely positioned?

    Here is the CSS I was using:
    Code:
    img
    {
    position:absolute;
    top: 40px;
    height: 90%;
    width: 90%;
    z-index:1;
    
    }

  • #2
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,138
    Thanks
    7
    Thanked 257 Times in 256 Posts
    If you know what the size of the box the image is sitting in, and the size of the image, then yes you could center it by absolute position. That could be a dangerous solution of course if you have any thoughts of allowing the window size to vary according to browsers, etc.

    Dave

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Absolutely. Javascript can detect the screen size, it can even detect the image size but it's better if it's supplied beforhand, and set the positions
    Code:
    myimg.style.left = (screen.width - image.offsetWidth)/2+"px";
    .

  • #4
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy

    I don't understand the code, could you please explain? Which are the reserved JS words and which are my own img's class/id?

    I tried doing this

    Code:
    .imgClass
    {
    left: 50%;
    margin-left: - (half the image width) px;
    }
    (All the images are a fixed, known width)

    But all that happens is that the left edge of the image ends up at the dead center of the page. After some fooling around I found that the image is completely unresponsive to the margin-left style. It looks like it is ignored. What can I do?

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You want the images to be in the center of the page?

    If so use:

    Code:
    <div class="myimages">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
    </div>
    Code:
    img.slide-show {margin:0; padding:0;}
    .myimages {margin-left:auto; margin-right:auto; width:6em}
    This will center stuff.

  • #6
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    You want the images to be in the center of the page?

    If so use:

    Code:
    <div class="myimages">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
            <img class="slide-show" src="location.png">
    </div>
    Code:
    img.slide-show {margin:0; padding:0;}
    .myimages {margin-left:auto; margin-right:auto; width:6em}
    This will center stuff.
    No dice. I'm getting the same result: The image is shoved all the way to the right until its left edge is at the center. The images themselves are not centered. Just their left edge. Basically it's comes up as being exactly half an image width to the right of where I want it to be. Any more ideas?
    Last edited by The Noob Coder; 07-26-2012 at 11:16 PM.

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    84
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Vertical centering question:

    I have a logo I want to center vertically in my header- opinion for most semantic option? Currently I placed the image via HTML with a class of logo but I can't figure out the rest; this logo will also be the home button.

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation

    Quote Originally Posted by Vytfla View Post
    Vertical centering question:

    I have a logo I want to center vertically in my header- opinion for most semantic option? Currently I placed the image via HTML with a class of logo but I can't figure out the rest; this logo will also be the home button.
    Not to sound rude, but no thread jacking! If you have a problem with making a vertical alignment you should start your own thread about it. Again, sorry for the bluntness. Thank you.

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by The Noob Coder View Post
    The slideshow is working fine, but the images (all of the exact same size) aren't centering in the page no matter what I try.
    To center absolutely positioned content to the viewport, you need to create a positioning context that matches the dimensions of the viewport. The positioning context is created with the top, bottom, left, and right properties:

    Code:
    img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 90%; width: 90%; }
    The above essentially says to create a positioning context zero pixels away from the top side of the viewport, zero pixels away from the bottom side of the viewport, and so forth. In other words, your positioning context will match the viewport dimensions.

    With the positioning context set, you can position (center) content within that context using the margin properties. To horizontally center the positioned content, use margin-left: auto and margin-right: auto. That should be familiar because it involves the same two declarations used to center non-positioned block-level content.

    Code:
    img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 90%; width: 90%; margin-left: auto; margin-right: auto; }
    To vertically center content within the positioning context, do the same with the margin-top and margin-bottom properties. (Note that this technique only works for positioned content.)

    Code:
    img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 90%; width: 90%; margin-top: auto; margin-bottom: auto; }
    To vertically and horizontally center content, you simply combine the techniques:

    Code:
    img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 90%; width: 90%; margin: auto; }
    Note that this will not work if a positioning context has already been created by an ancestor element via position: relative or position: absolute set on that ancestor, and that positioning context doesn't just happen to match the viewport dimensions.

    It also won't work in old versions of Internet Explorer which do not handle the top, bottom, left, and right properties correctly.

    And if you need to vertically center content somewhere down the page (via a scrollbar) rather than at the top of the page, then you're going to need to resort to JavaScript.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Quote Originally Posted by The Noob Coder View Post
    No dice. I'm getting the same result: The image is shoved all the way to the right until its left edge is at the center. The images themselves are not centered. Just their left edge. Basically it's comes up as being exactly half an image width to the right of where I want it to be. Any more ideas?
    Can I have the link to your website? You need to explain yourself a little harder rather than saying I want to center images, people will think "middle of the page?"

  • #11
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tempz View Post
    Can I have the link to your website? You need to explain yourself a little harder rather than saying I want to center images, people will think "middle of the page?"
    I really do mean the exact middle of the page . Here's the site:
    http://www.convolutedconstruct.com/look-book/alice/

    If you have any design complaints about it, bring it up with the last guy they hired to work on it. That wasn't at least my fault.

  • #12
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @Arbitrator

    Sorry it didn't work. For some reason the image seems to ignore any css related to margins.

  • #13
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    This?

    [IMG]--removed[/IMG]
    Last edited by tempz; 07-27-2012 at 09:08 PM.

  • #14
    New Coder
    Join Date
    Jul 2012
    Posts
    80
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Strange, the page looks like this right now for me (see attachment).

    But yes. I want that image in the center of the page. You'll notice that at the moment, I am using padding as a crude and temporary solution but that doesn't work for all browsers/resolutions. Hence my frustration.
    Attached Thumbnails Attached Thumbnails Is there a way to center an image if it is positioned absolutely?-workspace-1_008.jpg  

  • #15
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Okay after some time of changing and adding things I think I got what you want.

    Code:
    <style type="text/css">
    img.slider {
    position: absolute;
    z-index:1;
    left:192px;
    background-repeat:no-repeat;
    }
    .myimages {
     display:inline;
     float:left;
     top:0;
     left:0;
     position:absolute;
     z-index:-999;
    
    }
    p.loading  {
    	 position:absolute;
    	 top:-200px;
    	 left:10px;
    	 color: white; text-shadow: black 0.1em 0.1em 0.2em;
    	 font-size: 26pt;
    	 text-align: center;
    	 padding-top: 200px;
    	 font-family: Arial Rounded MT, Verdana;
    	 z-index:1;
    }
    
    .myimages img {
    	
    }
    .arrow {
    	z-index: 2;
    	opacity: 0.5;
    	position:relative;
    	top:150px;
    	left:0;
    	
    }
    </style>
    
    
    <div style="display:none"></div>
    <div class="myimages">
    	<p class="loading">Loading . . .</p>
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide1.jpg" class="slider" id="Pic1" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide2.jpg" class="slider" id="Pic2" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide3.jpg" class="slider" id="Pic3" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide4.jpg" class="slider" id="Pic4" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide5.jpg" class="slider" id="Pic5" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide6.jpg" class="slider" id="Pic6" />
    	<img src="http://convolutedconstruct.com/wp-content/gallery/NewAlice/Slide7.jpg" class="slider" id="Pic7" />
    </div>
    <!-- Arrows -->
    
    <img src="http://www.convolutedconstruct.com/wp-content/uploads/2012/07/arrowRightSmall.png" style="margin-right:380px;margin-left:-25px;" class="arrow" id="arrowRight" />
    <img src="http://www.convolutedconstruct.com/wp-content/uploads/2012/07/arrowLeftSmall.png"  style="margin-left:410px;" class="arrow" id="arrowLeft" />
    <!-- Arrows -->
    				</div>
    			</div>
    Replace this with the code you already have!


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •