5

li items には list-style-image を使用し、1 行のテキストを使用します。

ここに画像の説明を入力

でも見栄えが悪いので、テキストを画像の真ん中に縦に揃えたいです。

vertical-align: middle 、右を使用する必要がありますか? しかし、それは私にはうまくいきませんでした。

<html>
    <head>
        <title> This is an demo </title>
        <style>
            body {
                background-color: #464443;
                color: white;
            }
            ul {
                list-style-image: url('bg.png');
            }

            li {
                vertical-align: middle;
            }

        </style>
    </head>

    <body>
        <ul>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
            <li>abc</li>
        </ul>
    </body>
</html>
4

3 に答える 3

14

これを行うための満足のいく方法 (imo) は、list-style-image を使用せず、代わりに background プロパティを使用して「箇条書き」を設定することです (フィドルからコピー/貼り付けしたので、独自のプレースホルダー イメージに置き換えたことに注意してください)。パディングやその他の寸法は、「弾丸」画像のサイズによって異なります。

これがフィドルです：http://jsfiddle.net/huBpa/1/

body {
  background-color: #464443;
  color: white;
}

 ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 li {
   background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
   line-height: 32px;
   vertical-align: middle;
   padding-left: 40px;
 }​
于 2012-04-09T04:08:50.583 に答える
4

これは私が使用するものです。私は垂直方向の配置を使用せず、代わりにパディングを使用してテキストを移動して、希望する場所に配置します。

    ul {
            list-style: none;
            margin-left: 0;
            padding-left: 0;
    }

    li {
            padding: 10px 10px 15px 20px;
            background-image: url(images/arrow.png);
            background-repeat: no-repeat;
            background-position: 0px;
    }
于 2012-04-09T04:51:05.070 に答える
-1

li に line-height を追加します。画像と同じ高さであることを確認してください

` 

li {
            vertical-align: middle;
            line-height: 30px; 
        }
于 2012-04-09T04:11:13.907 に答える