SitePoint Sponsor

User Tag List

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

    how do i get this vertical centering to work?

    Hi

    So i have a picture that is 100% widht and heigh of a box. On that picture i want to have another div centered both vertical and horizontal. The width on the img and its parent is dynamic so im trying to do it with the table/table-cell method, but obv im doing something wrong.

    My current code, what am i doing wrong?

    Code HTML4Strict:
    <div class="box">
      <img>
      <div class="table">
        <div class="table-cell">
          <div class="iconbox">
          </div>
        </div>
      </div>
    </div>

    Code CSS:
    .box{
    width: 25%;
    position: relative;
    }
     
    .img{
    width: 100%;
    }
     
    .table{
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
     
    .table-cell{
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    }
     
    .iconbox{
    height: 64px;
    width: 64px;
    margin: 0 auto;
    background: blue;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Did you mean something like this:

    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">
    .box {
    	width: 25%;
    	position: relative;
    }
    img { width: 100%; }
    .iconbox {
    	position:absolute;
    	top:0;
    	right:0;
    	bottom:0;
    	left:0;
    	height: 64px;
    	width: 64px;
    	margin:auto;
    	background: blue;
    }
    </style>
    </head>
    
    <body>
    <div class="box"> <img src="http://placehold.it/400X400" alt="">
    		<div class="iconbox">Test </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
  •