SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Vertical Align with no Height

    Hi all,

    I'm trying to vertically align text in a box that has a height that changes to match the width (so that it's a perfect square). I just cannot get it to work. I'm trying to vertically align the text within the "smallbox" class.

    Here's my fiddle

    Here's my CSS:
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    html, body {
    	background: yellow;
    	font-size: 2.5vmin;
    }
    
    body {
    	text-align: center;
    }
    
    #container {
    	margin: 0 auto;
    	width: 100%;
    }
    
    .box {
    	/*width: 200vmin;*/
    	width: 90%;
    	margin: 0 auto;
    	display: inline-block;
    	/*padding-bottom: 5vmin;*/
    	padding-bottom: 2.5%;
    }
    .smallbox {
    	position: relative;
    	float: left;
    	vertical-align: middle;
    	width: 16.8%;
    	border-radius: 2vmin;
    	font-size: 6vmin;
    	text-align: center;
    	word-wrap: break-word;
    	display: table;
    	table-layout: fixed;
    	color: red;
    	background-color: blue;
    }
    .smallbox b {
    	margin-top: 100%;
    	display: block;
    	zoom: 1.0;
    }
    
    .smallbox p {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	text-decoration: none;
    	display: table-cell;
    	vertical-align: middle;
    }
    .content {
    	width: 80%;
    	min-height: 28vmin;
    	background-color: white;
    	float: right;
    	border-radius: 2vmin;
    	font-size: 3.5vmin;
    	position: relative;
    	padding-bottom: 5vmin;
    }
    .content:before {
    	content: ' ';
    	position: absolute;
    	width: 0;
    	height: 0;
    	left: -4.75vmin;
    	top: 13.5vmin;
    	border-top: 3vmin solid transparent;
    	border-bottom: 3vmin solid transparent; 
    	border-right: 5vmin solid white;
    }
    .title {
    	height: 5vmin;
    	padding: .75vmin 1.5vmin;
        border-radius: 2vmin 2vmin 1vmin 1vmin;
    	margin: .5vmin;
    	font-weight: bold;
    	text-align: left;
    	color: red;
    	background-color: blue;
    }
    .text {
    	padding: .5vmin 2vmin;
    	text-align: center;
    }
    .left {
    	padding: .5vmin 2vmin;
    	position: absolute;
    	bottom: 0;
    	font-weight: bold;
    }
    .right {
    	padding: .5vmin 2vmin;
    	position: absolute;
    	bottom: 0;
    	right: 0;
    	font-weight: bold;
        border-radius: 2vmin 2vmin 2vmin 2vmin;
    	margin: .5vmin;
    	color: red;
    	background-color: blue;
    }
    .right a {
    	text-decoration: none;
    }
    .arrowleft {
    	width: 0; 
    	height: 0; 
    	border-top: 10px solid transparent;
    	border-bottom: 10px solid transparent; 
    	border-right:10px solid blue; 
    }
    Here's my HTML:
    Code:
    <!DOCTYPE html>
    <html><head>
    		<link rel="stylesheet" href="box.css">
    	</head>
    <body>
    <div id="container">
    		<div class="box">
    				<div class="smallbox"><b></b><p>Onceuponatimeinafarawayland</p></div>
    				<div class="content">
    					<div class="title">Some Title</div>
    					<div class="text"><p>This is just some example text here</p>
    </div>
    					<div class="left">Left</div>
    					<a href=""><div class="right">Right</div></a>
    				</div>
    			</div>
    
    			
    			
     
    
    </div>
    
    </body></html>
    Thanks!

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try this

    <div style="display:table;height:300px;text-align:center;">
    <div style="display:table-cell;vertical-align:middle;">
    <!–content–>
    </div>
    </div>

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Eric, but that does not work with my code.

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately you don't have that many options if your height is dynamic. You may have to alter your code to flow well with the code I showed.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This is one area I haven't actually obsessively drilled into the ground yet. Next on my list. A far a I know that's the only way. But google will show you many examples by googling "css vertically center unknown height"

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I have a degree in google search lol. I actually have spent many hours in the past watching lessons on proficient use of google search.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, thanks Eric. I'll keep Googling.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Alternatively you can post this question over a css-tricks forum. There are many up and coming cocky css guys over there just waiting to solve new problems. No joke. Very active forum. Not to fond of the personalities over the though.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,625
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    And here is the only other way I know to do this. Don't know if this works with your code or not. But may give you some ideas. http://www.websitecodetutorials.com/...ntered-div.php

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,804
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you are talking about the text only inside that blue box then you can centre it like this.

    Add this:
    Code:
    .smallbox p:before{
    	content:" ";
    	display:inline-block;
    	vertical-align:middle;
    	height:100%;
    	width:1px;
    }
    .smallbox p span{
    	display:inline-block;
    	vertical-align:middle;
    	width:99%;
    }
    You will need an extra element inside the p element here.

    Code:
    <p><span>Onceuponatimeinafarawayland</span></p>
    However because you have absolutely placed that p element there is no guarantee that the text will always fit inside that box. Also browser support for vmin is only in the very latest browsers (Chrome doesn't seem to support it fully yet as the font-size is massive in chrome).

  11. #11
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Works excellent! And thanks for letting me know about vmin, too! I had actually also been wondering about vmin, vh, and vw, but you answered before I could even ask! Thanks!

  12. #12
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,734
    Mentioned
    31 Post(s)
    Tagged
    1 Thread(s)
    Pam, that was a clever trick to make the element a square.

    As always Paul's, solution is brilliant. I was going to suggest cleaning up the code with some pseudo elements:


    Code:
    				<div class="smallbox"><p><span>Once uponatime inafarawayland</span></p></div>
    .smallbox {
    	position: relative;
    	float: left;
    	width: 16.8%;
    	border-radius: 2vmin;
    	font-size: 6vmin;
    	text-align: center;
    	word-wrap: break-word;
    	color: red;
    	background-color: blue;
    }
    .smallbox:before {
    	margin-top: 100%;
    	display: block;
    	zoom: 1.0;
    	content:"";
    }
    
    .smallbox p {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    }
    .smallbox p:after, .smallbox p>span {
    		display: inline-block;
    		vertical-align: middle;
    
    }
    .smallbox p:after{
         	width:1px;
    		height:100%;
    		content:"";
    		margin-left:-1px;
    }
    alternatively you could do this :

    Code:
    .smallbox {
    	float: left;
     	width: 16.8%;
    	border-radius: 2vmin;
    	font-size: 6vmin;
    	text-align: center;
     	color: red;
    	background-color: blue;
    	position:relative;
    }
    .smallbox:before{ content:"";margin-top:100%; display:block;}
    .smallbox .wrp{	position:absolute; top:0; left:0; bottom:0; right:0;}
    .smallbox p {
    	display:table ;
     	height:100%; 
      }
    .smallbox p span {display:table-cell;	vertical-align: middle; height:100%; }
    
    				<div class="smallbox">
    					<div class="wrp"><p><span>Onceuponatimeinafarawayland</span></p></div>
    				</div>

    I just wanted to point out tho, floating an element, or giving it position:absolute AUTOMATICALLY gives the element display:block; consequently that's why you weren't able to apply vertical-align ( as the P was not being displayed as a table element) Also word-wrap doesn't work within table elements.

  13. #13
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray! Very helpful as usual. And making the element a square in that method was actually a work of Paul's brilliancy.


Tags for this Thread

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
  •