Question

我知道很久以前就已经回答了这个问题，但是我已经尝试了很多次，现在我的代码都是frankensteined。我明白使用float标签可以使vertical-align不能正常工作，但即使我拿出文本/链接STILL没有垂直对齐......我很茫然，我的代码看起来很蹩脚而且出去了控制。我尝试将样式放在链接标签本身而不是引用样式表... Ug我需要帮助。我不确定你是否需要所有的代码，它是帖子底部的作者框，这是一个小框，链接到同一作者的上一篇文章。

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;
}

Answer 1

你已经拥有：

    vertical-align: middle;

只需将以下内容添加到div.home_icon规则即可开始：

    display: table-cell;

对于所有调整，see this corresponding jsfiddle

Answer 2

根据您的情况，您可以尝试使用margin-top: 6px;作为标记。

Answer 3

以下是针对您的具体问题的一种解决方案：http://cssdesk.com/UezT7

请注意，我的更改是：

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

这是有效的，因为你有一行文字，你知道容器的大小。这不是垂直对齐文本的一般解决方案，但它适用于您的特定情况。

编辑： @ marlenunez的答案比我的好，我会选择他的路线。

垂直对齐DIV中的文本

3 个答案: