1

次のコードがあります。

<div id="table">
    <li>
        <img id="img_friend_1" src="">
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
    </li>
</div>

私のCSS

#table{
    display:  table;
    width:auto;
    display: inline-block;
}
label {
    display: inline-block;
}
input {
    margin:0;
    vertical-align: bottom;
    position: relative;
}

今、私はこれを手に入れました。写真の横に文字があります。

ここに画像の説明を入力[//チェックボックス] 私の名前

写真の下にラベルの付いたチェックボックスを配置したい。画像は、チェックボックスとラベルの中央に配置する必要があります。

ここに画像の説明を入力

[//チェックボックス] 私の名前

実際、CSS は非常に簡単で、実際に CSS に問題はありませんが、行き詰まっています。私はstackoverflowで検索し、CSSの組み合わせをたくさん試しました。

4

3 に答える 3

2

入力とラベルを別のものでラップするだけdivです：

<li>
    <img src="http://lorempixel.com/100/100">
    <div>
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
    </div>
</li>

デモ： http： //jsfiddle.net/mRk3S/

于 2013-03-10T20:04:33.083 に答える
2

入力とラベルをラップしてから、このように中央に揃える必要があります

HTML

<div id="table">

    <li>
        <img id="img_friend_1" src="http://i.stack.imgur.com/JsxB5.gif" style="width:150px">
        <div class="wrap">
        <input type="checkbox" value="1" id="form_friend_1" name="form[friend][]" />
        <label for="form_friend_1" >My name</label>
        </div>
    </li>
</div>

ここにあなたの.wrapクラスがあります

.wrap
{
    text-align: center;
}
于 2013-03-10T20:13:16.407 に答える
0

なぜここにたどり着いたのかわかりませんが、この効果を得るためにラッパーを使用する必要はありません。

li img に追加display:blockすると、その後に続くものに対して改行が発生します。position:relative; margin:0 auto;画像を中央に配置します。

text-align:centerli に追加すると、テキストが中央に配置されます。

この jsfiddle には、達成しようとしていると思われる効果があります。

https://jsfiddle.net/wxooa3tq/2/

また、この問題を分類したと思いますが、将来の読者はこれが役立つと思うかもしれません

于 2015-05-14T16:04:38.367 に答える