CODEWITHSUNDEEP
htmlcss
user3760941
user3760941

Reputation: 528

text within div is not vertically aligning

jsfiddle.net/6knk8qLc/

Hello, I'm having trouble with a simple vertical align. I want the text in the purple div to be vertically in the middle of the div, not too close to the top. I've tried:

display: table-cell;
vertical-align:middle;

These are not working. Am I missing something obvious?

Upvotes: 0

Views: 30

Answers (2)

Josh Ghiloni
Josh Ghiloni

Reputation: 1300

Wrap the text in an inner div, and set the display and vertical-align on THAT div, along with setting the height to the height of the outer div. See http://jsfiddle.net/z47Lphx4/

Upvotes: 0

Luís P. A.
Luís P. A.

Reputation: 9739

Create a wrapper..check this out:

CSS

.category-description{
    width:600px;
    height:140px;
    background:#C6C;
    padding: 30px;
    display: table;
    float:left;
}

.category-description div{
    display: table-cell;
    vertical-align: middle;
}

h2{
    font-family:arial,verdana,helvetica,sans-serif;
    font-size:14px;
    color:#201c1f;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    margin:0;
    padding: 0 0 10px 0;
}

p{
    font-family:arial,verdana,helvetica,sans-serif;
    font-size:14px;
    color:#333333;
    text-decoration:none;
    margin:0 0 0px 0;
    padding:0 0 0 0px;
}

HTML

<div class="category-description">
    <div>
      <h2>Retrospex Adept</h2>
      <p>Retail Price: £79.99</p>
      <p>Wholesale Price: Contact Us</p>
      <p>Affiliate Commission: 12.5%</p>
      <p>In Stock: Yes</p>
      <p><span style="padding-top:10px;display: inline-block">View More</span></p>
    </div>
</div>

DEMO HERE

Upvotes: 1

Related Questions