1

基本的に私がやろうとしているのは、アンカーリンク(矢印を含む)をdivの中央に配置することです。

私は（添付の写真の）矢印だけで列を複製しようとしています。とのみを使用
してを埋めます。垂直方向の中央揃えに問題があります。 inline-blockheight: 100%;div>

私はそれを使用して実行できることを知っていますがdisplay: table;、display: table-cell;それでもプロパティを試していdisplay: inline-block;ます。

質問を明確に述べたことを願っています。

フィドルでコメント付きのプロパティを削除して、目的の結果を表示することもできます。

写真を投稿することはまだ許可されていないと思います。

これは写真です:
http://yodame.freeoda.com/images/inline-block.jpg

これは私が以前に取り組んでいたフィドルです。
http://jsfiddle.net/nonamedesen/kVpSk/3/

4

2 に答える 2

0

他の要素なしでそれを行うには、リンクに line-height スタイルを適用できます。

a {
color: #fff;
background-color:#e74c3c;
text-decoration: none;
padding:0 2em;
line-height:15em}

値を変更してテキストを中央に配置するだけです。 JSFIDDLE

ただし、要素の高さが何らかの理由で変更された場合、値はそのままで、キャラクターが見えなくなる可能性があります... (最初のフィドルを試して、結果ウィンドウの高さを変更できます)

私が考える最良の方法は、より多くのdivを設定し、divをリンクで中央に配置することです。JSFIDDLE2の例を次に示します。

于 2013-07-24T08:59:15.227 に答える
0

inline-block他のテキストが必要ない場合は、パディングを追加して、スパンが中央に残るようにすることができます

HTML

<div>
    <span><a href="">&gt;</a></span>
</div>

CSS

div{
    display: inline-block;
    background: #60D3E8;
    padding: 50px 60px; 
}

span {
    font: bold 50px/50px 'source code pro', sans-serif;
}

a {
    color: white;
    text-decoration: none;  
}

デモ

于 2013-07-24T09:08:44.807 に答える