web-dev-qa-db-ja.com

順不同リストの箇条書きセンター

箇条書きを複数行の箇条書きリストの一番上に配置するCSSを知っている人はいますか？何らかの理由で、私が使用しているテンプレートでは、複数行のテキストがある場合、最初の単語の横に単に座っているのではなく、左中央に箇条書きを使用しています。

htmlcsshtml-lists
24
Logan

リストスタイルの位置をリストアイテム内に設定します。このデモフィドルを参照してください。

CSS：

ul {
    list-style-position: inside;
}
53
NGLN

これ自体は答えではありませんが、状況のセットが異なる同様の視覚的状況への洞察を他の人に与える可能性があります。

私は同じ問題を抱えていました：

Bullet centered in text block

私のHTMLは次のようになりました。

<ul>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
    <li>
        <a href="#">Link with several lines. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, commodi!</a>
        <p>Lorem ipsum dolor sit amet.</p>
    </li>
</ul>

そしてこのようなCSS：

a {
    display: inline-block;
    vertical-align: middle;
}

問題のある部分を見ますか？ vertical-align: middle;宣言。

2つの解決策があります。

解決策1

vertical-align: middle;宣言を完全に削除します。

解決策2

値をvertical-align: middle;からvertical-align: top;に変更します。

結果（最初に期待したとおり）：

Bullet top aligned

お役に立てれば。

1
Ricardo Zea