1

我的页面中有一个 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

4

2 回答 2

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;。如果您需要帮助理解我刚刚发布的任何内容，请随时提问。

于 2012-06-07T22:54:43.770 回答
-1

在#image 样式上添加：

width: 30px;
margin: auto;
于 2012-06-07T22:43:31.523 回答