0

我知道这个问题之前已经回答过很多次了，但是我已经尝试了很多次，现在我的代码都被弗兰肯斯坦在一起了。我知道使用浮动标签会使垂直对齐无法正常工作，但即使我把它拿出来，文本/链接仍然没有垂直对齐......我很茫然，我的代码看起来很糟糕并且出去了的控制。我尝试将样式放在链接标签本身中，而不是引用样式表... 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;
}
4

3 回答 3

0

这是针对您的特定问题的一种解决方案：http: //cssdesk.com/UezT7

请注意，我的更改是：

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

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

编辑： @marlenunez 的回答比我的好，我会走他的路。

于 2013-06-06T16:42:13.500 回答
0

你已经有了：

    vertical-align: middle;

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

    display: table-cell;

对于所有调整，请参阅此相应的 jsfiddle

于 2013-06-06T16:17:49.797 回答
0

您可以尝试：margin-top: 6px;对于您的标签，在您的情况下。

于 2013-06-06T16:21:07.507 回答