0

フィドル： http： //jsfiddle.net/pMZ5T/

HTML：

<div id="arrowcont">
    <img width="30px" height="30px" src="check.jpg" style="float:left;" />
    <div id="verticalcenter">Full Guide</div>
</div>
<br>
<br>

CSS：

#arrowcont {
    height: 40px;
    width: 275px;
    border: 1px solid black;
    vertical - align: middle;
    background - position: 0 50 % ;
}

#verticalcenter {
    vertical - align: middle;
    background - position: 0 50 % ;
}​

これらの両方を垂直方向に中央に配置して、隣り合ったときに見栄えが良くなるようにします。画像は実際にはその横にあるチェックマークです。

私はこの質問がたくさん聞かれたことを知っています、そして私は実際に過去にそれを尋ねさえしました、しかし私は私が持っていた他の質問の方法を使いました、しかし私はまだこれを垂直に中央に置くことができません。誰かが私がどこで間違っていたのかわかりますか？background-positionタグとverticalmiddleタグを試しましたが、どちらも機能しませんでしたか？

4

2 に答える 2

2

これは機能します：http：//jsfiddle.net/GyVSt/

私がしたこと：

  1. に変更#arrowcontされましたdisplay: table-cell（許可されますvertical-align）
  2. float: leftから削除img
  3. display: inline-blockとのためimgに追加されました#verticalcenter（互いに隣り合って配置されますimg）#verticalcenter
于 2012-07-17T21:47:39.410 に答える
1

vertical-align: middleテーブルセル要素にのみ適用でき、使用できますdisplay: table-cellが、これではレイアウトが壊れる可能性があります。

于 2012-07-17T21:43:06.130 に答える