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 add：

width: 30px;
margin: auto;

CSS职位：Img到div的正中间

2 个答案: