Stacey Stacey - 1 year ago 61
CSS Question

Verticl Align with a set width and a height of 100%

I am working on a tumblr theme. I want to make my tags, date, and other info appear on hover of the post while filling up the post with a solid background color. I have accomplished that part by searching this site for the answer. The part that I haven't been successful at is making the info inside the post center/middle aligned. I have tried the

and noting has worked. My posts are a width of
and the height of them is set at
, based on if the picture is bigger or smaller in height. You can also see that when my margin of the date div is set to
auto it doesn't work. It makes some info show close to the middle while the smaller posts it show the info at the bottom.

What I am asking is how do I center the tags, date, and other info that appear on hover to be in the middle of the solid background color that covers the posts no matter what the height of the post.

Here is the code I have so far.


body {
font-size: 10px;
font-family: {font:body};
color: {color:text};
background-color: {color:background};

a {
color: {color:links};
text-decoration: none;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;

a:hover {
color: {color:links hover};
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;

.container {
width: 800px;
margin: auto;

.entries {
width: 420px;
margin-top: 50px;
margin-left: 240px;

.posts {
position: relative;
margin-bottom: 20px;
padding: 5px;
width: 400px;
height: auto;
background-color: {color:posts};
z-index: 1;

.posts img, .posts li, .posts ol .posts blockquote {
max-width: 100%;
height: auto;

div.posts:hover .tags:hover {
display: block;
padding: 0px;
height: 100%;
color: #ccc;
background-color: #663399;
opacity: 1;

.tags {
display: block;
position: absolute;
top: 0;
left: 0;
width: 410px;
height: 100%;
padding: 10px;
font-size: 12px;
text-align: center;
background-color: {color:links hover};
opacity: 0;
z-index: 2;

.tags a {
margin: 2px 4px;
color: #fff;

.tags a:hover {
margin: 2px 4px;
color: #000;
text-shadow: 0px 1px #fff;

.date {
display: inline-block;
margin: 50% auto;
padding: 5px;
font-size: 16px;
text-transform: uppercase;
text-align: center;
font-weight: 700;
border: 2px solid #fff;
margin-bottom: 5px;

.reblogs {
margin-top: -6px;
margin-left: -5px;
width: 390px;
height: auto;
padding: 10px;
font-size: 10px;
text-transform: uppercase;
text-align: center;


<div class="container">

<div class="sidebar">
<div class="head"><i class="fa fa-home" aria-hidden="true"></i> <div style="font-size:14px;color:#fff;text-transform:uppercase;padding:0px;margin-bottom:-5px;font-style:bold;">Screamiing Colour</div></div><!--- end head --->
<div class="desc">{Description}</div><!--- end desc --->

</div><!--- end sidebar --->

<div class="entries">

<!-- {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}”
width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
{/block:NoSourceLogo} -->

<div class="posts">

<div class="tags"><div class="date">{block:Date}<a href="{Permalink}">{Month} {MonthNumberWithZero}, {Year}</a>{/block:Date}</div><br>{block:HasTags}{block:Tags}<a href="{TagURL}"><span style="color:#000;">#</span>{Tag}</a>{/block:Tags}{/block:HasTags} <div class="reblogs">{block:RebloggedFrom}<a href="{ReblogParentURL}" title="{ReblogParentName}">Via</a>{/block:RebloggedFrom} &nbsp;{block:NoteCount}<a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</div>
</div><!-- end tags -->

<!-- TEXT POSTS -->

<div class="askerpic"><img src="{AskerPortraitURL-30}"></div>
<div class="asker">{Asker}</div><div class="ask">
<br>sent me something</div>
<div class="question">{Question}</div>
<div class="answer">{Answer}</div>

<!-- QUOTE POSTS -->
<div class="tulipwrap quote"><a class="tuliptation" href="{SourceURL}" title="tulips"></a>
<div class="tulips">&nbsp;- {Source}

<!-- LINK POSTS -->
<div class="lp"><a href="{URL}">{Name}</a></div>
{block:Description}<div class="ld">{Description}</div>{/block:Description}

<!-- CHAT POSTS -->
<div class="post"><div class="willow">
<li class="line {Alt}">
<span class="label">

<!-- PHOTO POSTS -->
{LinkOpenTag}<a href="#" onclick="Tumblr.Lightbox.init([{ width: {PhotoWidth-HighRes}, height: {PhotoHeight-HighRes}, low_res: '{PhotoURL-400}', high_res: '{PhotoURL-HighRes}' }]); $('body').toggleClass('tumblr_lightbox_active'); return false">
<img src="{PhotoURL-HighRes}">

<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">{block:Photos}<div class="photo-data"><div class="pxu-photo"><img src="{PhotoURL-400}" width="{PhotoWidth-400}" height="{PhotoHeight-400}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}"></div><a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}"></a></div>{/block:Photos}</div>

<!-- VIDEO POSTS -->

<!-- AUDIO POSTS -->
{block:AlbumArt}<img src="{AlbumArtURL}">{/block:AlbumArt}
{block:TrackName} {TrackName} {/block:TrackName}
{block:Artist} {Artist} {/block:Artist}
</div><!--- end posts --->


<!-- {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}” width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />
{/block:NoSourceLogo} -->

</div><!--- end entries --->
</div><!--- end container --->

If you want to take a look at what I have in action my url is

Answer Source

I don't know tumblr but in html/css you can do something like this:

<div class="element">
   <div class="text-hover">
       Your hover tekst goes here

And css:

   position: relative;
   display: block;
.element .text-hover{
   position: absolute;
   top: 50%;
   width: 100%;
   text-align: center;
   transform: translate(0, -50%);
   -ms-transform: translate(0, -50%);
   -webkit-transform: translate(0, -50%);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download