Vertical alignment of text within a box

Discussion in 'CSS' started by MaryMach, Oct 7, 2012.

0
  1. #1
    Is there a way to align text vertically in a box other than using padding?
     
    Solved! View solution.
    MaryMach, Oct 7, 2012 IP
  2. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #2
    Sure, use this code:
    
display: table-cell;
vertical-align: middle;
    Code (markup):
    Here's a http://jsfiddle.net/JTuF7/ example

    Please mark as solved :)
     
    ntmedia, Oct 7, 2012 IP
  3. MaryMach

    MaryMach Greenhorn

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    Apparently I'm still doing something wrong. Here's my code and my style sheet. I tried your advice on the 'ponds' link.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

    <title>Raising Butterfly Kits from Native Nurseries</title>

    <meta name="description" content="We've been designing & redesigning our Butterfly Rearing Cages for over 30 yrs. They're functional, durable, collapsible, light enough (4 lbs.) for easy handling, heavy enough for stability & easy to clean!">

    <meta name="keywords" content="raising butterfly kits,butterfly cages,butterfly habitat,caterpillar cages,butterfly rearing kits,www.raising-butterfly-kits.com">

    <link href="stylesheetbutterfly.css" rel="stylesheet" type="text/css" media="screen">

    <meta name="robots" content="noindex,nofollow">

    </head>

    <body>

    <!-- main container --><div class="raising-butterfly-kits">

    <div class="logobox"><img src="img/tallahassee-nursery.jpg" alt="Native Nurseries of Tallahassee"></div>

    <div class="homelinkbox"><a href="http://www.nativenurseries.com/index.html">Home</a></div>

    <div class="pondslinkbox"><a href="http://www.nativenurseries.com/ponds.html">Ponds</a></div>

    <div class="plantsandlandscapinglinkbox"><a href="http://www.nativenurseries.com/plantsandlandscaping.html">Plants & Landscaping</a></div>

    <div class="wildbirdstorelinkbox"><a href="http://www.nativenurseries.com/wildbirdstore.html">Wild Bird<br>Store</a></div>

    <div class="giftshoplinkbox"><a href="http://www.nativenurseries.com/giftsshop.html">Gifts/Shop</a></div>

    <div class="contactlinkbox"><a href="http://www.nativenurseries.com/contact.html">Contact</a></div>

    <div class="giftcertificateslinkbox"><a href="http://www.nativenurseries.com/giftcertificates.html">Gift<br>Certificates</a></div>

    <div class="workshopcalendarlinkbox"><a href="http://www.nativenurseries.com/documents/bird_center.pdf">Workshop Calendar</a></div>

    <div class="butterflyrearingcagelinkbox"><a href="index.html">Butterfly Rearing Cage</a></div>

    </div>

    </body>
    </html>


    /* stylesheetbutterfly */

    body {

    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;

    }

    a:link {

    color: purple;

    }

    a:visited {

    color: gray;

    }

    .logobox {

    width: 592px;
    height: 247px;
    background-color: #ffffcc;
    position: absolute;
    top: 0px;
    left: 0px;
    outline: white solid 0px;

    }

    .homelinkbox {

    width: 103px;
    height: 34px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    padding: 14px 0 0 0;
    position: absolute;
    top: 0px;
    left: 594px;
    outline: white solid 0px;

    }

    .pondslinkbox {

    display: table-cell;
    vertical-align: middle;
    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 0px;
    left: 699px;
    outline: white solid 0px;

    }

    .plantsandlandscapinglinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 50px;
    left: 594px;
    outline: white solid 0px;

    }

    .wildbirdstorelinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 50px;
    left: 699px;
    outline: white solid 0px;

    }

    .giftshoplinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 100px;
    left: 594px;
    outline: white solid 0px;

    }

    .contactlinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 100px;
    left: 699px;
    outline: white solid 0px;

    }

    .giftcertificateslinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 150px;
    left: 594px;
    outline: white solid 0px;

    }

    .workshopcalendarlinkbox {

    width: 103px;
    height: 48px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 150px;
    left: 699px;
    outline: white solid 0px;

    }

    .butterflyrearingcagelinkbox {

    width: 208px;
    height: 47px;
    background-color: #ffffcc;
    text-align: center;
    font-size: .85em;
    position: absolute;
    top: 200px;
    left: 594px;
    outline: white solid 0px;

    }








    .raising-butterfly-kits { /* butterfly - main container */

    width: 800px;
    height: 1000px;
    position: relative;
    margin: auto;
    outline: white solid 0px;

    }
     
    MaryMach, Oct 7, 2012 IP
  4. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #4
    It's not working because it has position: absolute. You can't use position absolute, and table-cell and think that it will work. I won't. It ain't compatible. And code in overall is bad. You shouldn't it be doing that way. Use floats instead.

    I'll write you a complete code for this and put it here.
     
    ntmedia, Oct 8, 2012 IP
  5. #5
    Here you go:
    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<head>


<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">


<title>Raising Butterfly Kits from Native Nurseries</title>


<meta name="description" content="We've been designing & redesigning our Butterfly Rearing Cages for over 30 yrs. They're functional, durable, collapsible, light enough (4 lbs.) for easy handling, heavy enough for stability & easy to clean!">


<meta name="keywords" content="raising butterfly kits,butterfly cages,butterfly habitat,caterpillar cages,butterfly rearing kits,www.raising-butterfly-kits.com">


<link href="stylesheetbutterfly.css" rel="stylesheet" type="text/css" media="screen">


<meta name="robots" content="noindex,nofollow">


</head>


<body>
<div id="container">


<div id="logobox">
<img src="img/tallahassee-nursery.jpg" alt="Native Nurseries of Tallahassee">
</div>


<div id="linkwrap">
<ul>
<li><a href="http://www.nativenurseries.com/index.html">Home</a></li>
<li><a href="http://www.nativenurseries.com/ponds.html">Ponds</a></li>
<li class="two-lines"><a href="http://www.nativenurseries.com/plantsandlandscaping.html">Plants & Landscaping</a></li>
<li class="two-lines"><a href="http://www.nativenurseries.com/wildbirdstore.html">Wild Bird<br>Store</a></li>
<li><a href="http://www.nativenurseries.com/giftsshop.html">Gifts/Shop</a></li>
<li><a href="http://www.nativenurseries.com/contact.html">Contact</a></li>
<li class="two-lines"><a href="http://www.nativenurseries.com/giftcertificates.html">Gift<br>Certificates</a></li>
<li class="two-lines"><a href="http://www.nativenurseries.com/documents/bird_center.pdf">Workshop Calendar</a></li>
<li><a href="index.html">Butterfly Rearing Cage</a></li>
</ul>


</div>
</div>


</body>
</html>
    Code (markup):
    
/* NEW CSS */
#container {
width: 804px;
height: auto;
margin: 0 auto;
position: relative;
}
#logobox {
width: 592px;
height: 247px;
background-color: #FFC;
float: left;
}
#linkwrap {
width: 210px;
float:right;
height: 247px;
}
#linkwrap ul {
list-style: none;
margin: 0;
padding: 0;
}
#linkwrap ul li {
display: table-cell;
float: left;
width: 103px;
height: 48px;
background-color: #FFC;
text-align: center;
font-size: .85em;
margin: 0px 2px 2px 0px;
vertical-align: middle;
line-height: 48px;
}
#linkwrap ul li a {
display: block;
}
.two-lines {
line-height: 17px !important;
}
.two-lines a {
margin-top: 6px;
}
#linkwrap ul li:nth-last-child(1) {
width: 208px;
height: 47px;
line-height: 47px;
}
#linkwrap div {
display: table-cell;
float: left;
width: 103px;
height: 48px;
background-color: #FFC;
text-align: center;
font-size: .85em;
margin: 0px 2px 2px 0px;
vertical-align: middle;
}
    Code (markup):
    I've forgot that floating elements don't allow table-cell and vertical align combination. That's why I've done it with li elements and line height. Though on two line texts you need to include a class that's I've included.

    Enjoy
     
    ntmedia, Oct 8, 2012 IP
  6. angeljakes

    angeljakes Peon

    Messages:
    28
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    @ntmedia, your are really genius.

    Can you help me? Actually i want to learn CSS so can you suggest me any website from where i can learn this.

    Reply me soon.
     
    angeljakes, Oct 9, 2012 IP
  7. ntmedia

    ntmedia Active Member

    Messages:
    118
    Likes Received:
    11
    Best Answers:
    7
    Trophy Points:
    90
    #7
    ntmedia, Oct 9, 2012 IP