0

次のjsFiddleを見て、適切に変更してください。基本的に、テキストを画像の高さの真ん中に完全に配置したいと思います。

http://jsfiddle.net/e7AV9/1/

4

4 に答える 4

3

これを背景画像として設定し、中央に配置してから、このhttp://jsfiddle.net/e7AV9/5/のように少し左のパディングを追加することができます。

于 2012-05-31T00:36:18.680 に答える
1

私は絶対的なポジショニングに部分的です。

CSS

* {
    font-family: Verdana;
    font-size: 10px;
}

nav > ul li:nth-child(2) a:before {
    position: absolute;
    top: 9px;
    left: -2px;
    content: url(http://s2.postimage.org/1waex5o10/9j41t1.png) " ";
}

nav a {
    color: #626262;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    width: 150px;
    display: inline-block;
}

nav ul li {
    position: relative;
    display: inline-block;
    list-style: none;
}

HTML

<nav>
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="forum.php">Community</a></li>
    </ul>
</nav>

</ p>

于 2012-05-31T00:39:08.333 に答える
1

画像を直接HTMLに入れて、そのようにスタイルを設定することもできます：http: //jsfiddle.net/e7AV9/10/

CSS：contentの問題は次のとおりです。

コンテンツ宣言は一切使わない方がいいと思います。ページにコンテンツを追加します。CSSは、コンテンツではなく、ページにプレゼンテーションを追加するためのものです。したがって、動的にコンテンツを生成したい場合は、JavaScriptを使用する必要があると思います。CSSはこの仕事には間違ったツールです。

于 2012-05-31T00:47:02.543 に答える
0

別の解決策は、vertical-alignを追加することです：この例のようなtop：http: //jsfiddle.net/Vh6wP/。

また、vertical-alignのリンクもあります：他の値についてはhttp://css-tricks.com/what-is-vertical-align/ 。

于 2012-05-31T02:16:17.197 に答える