0

これは以前に何度も回答されていることは知っていますが、何度も試してみましたが、コードはすべて一緒にフランケンシュタイン化されています。フロートタグを使用すると垂直方向の配置が正しく機能しない可能性があることは理解していますが、それを取り出しても、テキスト/リンクはまだ垂直方向に整列していません...途方に暮れています。コントロールの。スタイルシートを参照する代わりに、リンクタグ自体にスタイルを入れてみました... うーん、助けが必要です。すべてのコードが必要かどうかはわかりませんが、投稿の下部にある作成者ボックス用で、これは同じ作成者による以前の投稿にリンクする小さなボックスです。

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

特定の問題に対する解決策の 1 つを次に示します: http://cssdesk.com/UezT7

私の変更点は次のとおりです。

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

テキストが 1 行で、コンテナのサイズがわかっているため、これが機能します。テキストを垂直方向に配置する一般的な解決策ではありませんが、特定のケースでは機能します。

編集： @marlenunezの答えは私のものよりも優れています.私は彼のルートに行きます.

于 2013-06-06T16:42:13.500 に答える
0

あなたが試すことができます：margin-top: 6px;あなたの場合、あなたのタグのために。

于 2013-06-06T16:21:07.507 に答える
0

あなたはすでに持っています：

    vertical-align: middle;

開始するには、次を div.home_icon ルールに追加するだけです。

    display: table-cell;

すべての調整については、この対応する jsfiddle を参照してください

于 2013-06-06T16:17:49.797 に答える