Vertical Align Text in DIV

Question

I know this has been answered many time before, but I have tried soooo many times and now my code is all frankensteined together. I understand that using float tags can make the vertical-align not work properly but even when I took that out the text/link STILL didn't vertically align... I'm at a loss, my code is looking crappy and getting out of control. I tried just putting the style in the link tag itself instead of referencing a style sheet... Ug I need help. I'm not sure if you need all of the code, it's for an author box at the bottom of posts, and this is a little box that links to previous post by the same author.

HTML

<div class="home_icon">
<a href="%author_link% " style="display: block; font: bold 13px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; vertical-align: middle; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
 text-decoration: none;">
View all %post_count% posts by %name%  </a>
</div>

CSS

    .home_icon {
      width: 425px;
      height: 30px;
      float:right;
      font: bold 11px 'lucida sans', 'trebuchet MS', 'Tahoma';
      color: #fff;
      text-transform: uppercase;
      background: #d83c3c;
      position: relative;
      text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
      vertical-align: middle;
      text-align: left;
      padding: 0px;
      margin-top: 5px;
      -webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.3);
       box-shadow:0 1px 3px rgba(0, 0, 0, 0.3) ;
}
.home_icon:before { 
    content:"";
    position:absolute;
    right: 100%;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 15px solid #d83c3c;
    border-bottom: 15px solid transparent;
}

marlenunez · Answer 1 · 2013-06-06T16:29:07.473

0

You already have:

    vertical-align: middle;

Just add the following to the div.home_icon rule to get started:

    display: table-cell;

For all adjustments, see this corresponding jsfiddle

edited Jun 06 '13 at 16:29

answered Jun 06 '13 at 16:17

marlenunez

626
4
9

score 0 · Answer 2 · answered Jun 06 '13 at 16:21

0

you can try: margin-top: 6px; for your a tag, in your case.

answered Jun 06 '13 at 16:21

Gimmy

3,781
2
18
27

score 0 · Answer 3 · answered Jun 06 '13 at 16:42

Here's one solution to your specific issue: http://cssdesk.com/UezT7

Note that my changes are:

.home_icon {padding-top: 10px; height:20px;}
.home_icon:before {top:0px;}

This works because you have one line of text and you know what size you want the container to be. It's not a general solution to aligning text vertically, but it works in your specific case.

Edit: @marlenunez's answer is better than mine, I would go his route.

Vertical Align Text in DIV

3 Answers3