CODEWITHSUNDEEP
htmlcss
Deddiekoel
Deddiekoel

Reputation: 2089

Text in DIV stuck to the bottom

I'm running into a strange problem. What I'm trying to achieve is a "stretched diamond shape" button. This is a shape that starts with a triangle then has an extended straight middle and another triangle at the end. For this shape I've come up with the following CSS:

#button-medium {
    height: 30pt;
    position: relative;
    display: inline-block;
    background-color: #ff7e39;
}
#button-medium:before {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    position: relative;
    display: inline-block;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

This produces the shape I am looking for and it even extends with the content. All nice and good. My problem is that when I want to use this shape with some text. The text is stuck to the bottom of the span or div that I'm using! I've tried padding, margin other divs inside and nothing seems to work. This is my HTML

<!DOCTYPE html>
<html>
<head>
    <title>&deg;</title>
    <link href="css/52Noord.css" rel="stylesheet">
</head>
<body>
<div align="center"><div id="button-medium"><span style="padding-bottom: 3pt">The Text</span></div></div>
</body>
</html>

Any idea how to achieve this kind of shape and have it contain centered (vertical and horizontal) text?

Here is a JSFiddle.

Upvotes: 0

Views: 2072

Answers (1)

EmileKumfa
EmileKumfa

Reputation: 414

You basically need to change the position:relative in the :before and :after to floats. Then give a line-height to the content within the span

Updated CSS:

#button-medium span {
    line-height: 40px;
}
#button-medium:before {
    content:"";
    float: left;
    border-bottom: 15pt solid transparent;
    border-right: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-left: -15pt;
}
#button-medium:after {
    content:"";
    float: right;
    border-bottom: 15pt solid transparent;
    border-left: 15pt solid #ff7e39;
    border-top: 15pt solid transparent;
    margin-right: -15pt;
}

Demo: http://jsfiddle.net/L8gRw/

Upvotes: 3

Related Questions