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)

    vertically center content on a dynamic image?

    Anyone know how I can vertically align the content of "box" while box beeing absolute positioned and 100% width/height ofo the IMG, which is responsive to its parent which has a width of 25% of the body.

    Code HTML4Strict:
    <a href="#">
    <img />
    <div class="box">
    <h2>text</h2>
    <p>text</p>
    </div>
    </a>


    Code CSS:
    a{
    width: 25%;
    display: block;
    float: left;
    position: relative;
    }
     
    img{
    width: 100%;
    }
     
    .box{
    position: absolute;
    top: 0;
    left: 0;
    ????
    ????
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I assume this html5 and ie8+ so you could do something like this:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
    a {
    	width: 25%;
    	display: block;
    	float: left;
    	position: relative;
    }
    img {
    	width: 100%;
    	height:auto;
    	display:block;
    }
    a {
    	display:block;
    	width:50%;
    	border:1px solid red;
    	position:relative;
    }
    .box {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right:0;
    	bottom:0;
    }
    .boxtable {
    	width:10%;
    	height:100%;
    	display:table;
    }
    .inner {
    	display:table-cell;
    	vertical-align:middle;
    	width:100%;
    	height:100%;
    }
    </style>
    </head>
    
    <body>
    <a href="#"> <img src="http://placehold.it/350x150" />
    <div class="box">
    		<div class="boxtable">
    				<div class="inner">
    						<h2>text</h2>
    						<p>text</p>
    				</div>
    		</div>
    </div>
    </a>
    </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
  •