CODEWITHSUNDEEP
htmlcss
Alon Shmiel
Alon Shmiel

Reputation: 7121

put text in the upper center of another div

I am trying to put names in the middle of the div of the gold podium (no matter the number Of letters in the word).

I gave 3 examples for the gold podium:

enter image description here

this is the jsfiddle: http://jsfiddle.net/alonshmiel/9rY3k/3/

I tried to let left the calculation of the width of the screen and to reduce the (width of the gold div) / 2. but it didn't work. the words start in the same place.

<div class="podium-block gold">
    <span class="place">1st place</span>
<span class="sum">$5000</span>
<span class="name">Jacob Collins</span>
    <div class="podium"></div>
</div>

any help appreciated!

Upvotes: 0

Views: 98

Answers (2)

Morpheus
Morpheus

Reputation: 9065

I don't know if this is what you are trying to achieve, but here is the CSS solution:

.podium {
    display: table;
    width: 100%;
}

.podium > * {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff; /* not needed, just for clarity */
    font-size: 16px; /* not needed, just for clarity */
}

Updated fiddle

For aligning the text top change vertical-align: middle; to vertical-align: top;

Upvotes: 2

Reger
Reger

Reputation: 474

Correcting the last part of the JQuery, it works:

$('.name').delay(1000).animate({
    "opacity": "1"
}, 500);

Alhough as it is said in the comment below, it can be solved using CSS

Upvotes: 3

Related Questions