html - CSS 位置: Img から div の右中央まで

Question

ページに div 要素があり、div の真ん中に到達しようとしている矢印があります。コードは次のとおりです。 HTML:

<div id="popup">
   <p>
      This is the inside of a div element.
   </p>
</div>
<div id="image"></div>

CSS:

#popup {  
    background-color: whiteSmoke;
    width:500px;
    margin:0px auto;
    margin-top:100px;
}
#image {
    background-image:url('/images/jquerys penis.png');
    border:1px solid black;
    width:30px;
    height:30px;
    float:right;
}

私が取り組んでいるウェブサイト: site.brycemckenney.com/jquery.html

Answer 1

マークアップを少し変更する必要がありました: http://jsfiddle.net/Wexcode/y7jTb/

HTML:

<div id="popup">
    <p>This is the inside of a div element.</p>
    <div id="image"></div>
</div>

CSS:

#popup {  
    width: 500px;
    white-space: nowrap;
    margin: 0 auto; }
#popup * { white-space: normal; }
#popup p { 
    background-color: whiteSmoke;
    vertical-align: middle;
    display: inline-block; }
#image {
    background: url('http://site.brycemckenney.com/images/jquerys%20penis.png') 0 0 no-repeat;
    border: 1px solid black;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    display: inline-block; }​

display: inline-block;このソリューションは、、、white-space: nowrapおよびに依存しvertical-align: middle;ます。今投稿した内容を理解するのに助けが必要な場合は、お気軽にお問い合わせください。

Answer 2

#image style に以下を追加:

width: 30px;
margin: auto;