SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to solve this? Vertical align question.

    I have a parent, that is 100% viewport height, and in this I have an img, the img size is to its parent.
    Is there any way to vertically center the image without having to use static height and width for it?

    codepen: http://codepen.io/pen/

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Try use the css code from this example:
    Code:
    <style type="text/css"><!--
    div.container {
     height: 12em;
     border: 2px dotted blue;
     display: table-cell;           /* forms as a table cell */
     vertical-align: middle;        /* center vertically */
     text-align: center;            /* center horizontally */
     padding: 3px 4px;
    }
    --></style>
    
    <div class="container">
     <img src="image.jpg" alt="Text for image" width="120" height="60" /><br/>
     This line of text and the image above are vertically and horizontally centered.
    </div>
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ReGGaeBOSS View Post
    I have a parent, that is 100% viewport height, and in this I have an img, the img size is to its parent.
    Is there any way to vertically center the image without having to use static height and width for it?

    codepen: http://codepen.io/pen/
    Your link isn't working I'm afraid.

    As mentioned above you can use display:table-cell to vertically align content and will work in IE8+ (+all non IE).

    Isn't this the same question you answered in this thread which received much the same answer ?

  4. #4
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Your link isn't working I'm afraid.

    As mentioned above you can use display:table-cell to vertically align content and will work in IE8+ (+all non IE).

    Isn't this the same question you answered in this thread which received much the same answer ?
    No it is not the same, at least I don't think so.

    Now I want to vertically center a dynamic image, the image-size is responsive to its parent, which is 100% viewport height. The image has 70% width as its only size-value.
    I have tried using table, table-cell but it doesn't seem to work in this case.

    Code CSS:
    .parent{
    height: 100%;
    display: table;
    }
     
    img{
    width: 70%;
    display: table-cell;
    vertical-align: middle;
    }

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,454
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Do you suppose you can post another link to codepen? or maybe the same code in a working page (starts with <doctype, ends with </html>) here?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The image would need to be in a container as display:table-cell won't work for an image as it isn't a container for content (its a replaced element). Place the image in a container that is display:table-cell.

    working example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0;
    	height:100%;
    }
    .parent {
    	height: 100%;
    	width:100%;
    	display: table;
    }
    .child {
    	display: table-cell;
    	vertical-align: middle;
    	text-align:center;
    }
    img {
    	width: 70%;
    	height:auto;
    	vertical-align: middle;
    }
    </style>
    </head>
    
    <body>
    <!-- IE8+ only (+ all other modern browsers)-->
    <div class="parent">
    		<div class="child"><img src="http://placehold.it/350x150" alt="vertical image"></div>
    </div>
    </body>
    </html>


Bookmarks

Posting Permissions

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