Question

我一直疯狂地搜索我的问题，我似乎无法解决问题。

我创建了iFrame，用左右方向按钮滚动8个图像。当我text-align: center;保存图像的DIV时，右箭头（＃leaf2）消失。

这是我的HTML，

<html>
<body>

<div id="leaf1"><button onClick="image_onclick('prev');"><img src="images/leaf.gif/></button</div>
<div id="image_box"></div>
<div id="leaf2"><button onClick="image_onclick('next');"><img src="images/leaf2.gif"/></button></div>

</body>
</html>

这是我的CSS，

body, p, image{
    margin: 0;
    padding: 0;
}

button{
    background-color: #ffffff;
    border: 0;
}

#image_box{
    text-align: center;
}

#image_box img{
    border: 1px solid black;
}

#leaf1{
    position: absolute;
    margin: 155px 0 0 8px;
}

#leaf2{
    position: absolute;
    margin: 160px 0 0 850px;
}

Answer 1

我不确定这是否是复制中的错误但你有＆LT; /按钮＆LT; / DIV＆GT; 而不是＆LT; /按钮＆GT;＆LT; / DIV＆GT;

此外，如果您尝试将图像置于image_box中心，则需要将左右边距设置为自动。所以：

            image_box img{
                margin: 0 auto; /* or margin-left:auto; margin-right:auto; */
                border: 1px solid black;
            }

Answer 2

这里有几个语法问题：

<img src="images/leaf.gif/></button</div>

关闭src属性和<button>元素后，网页的呈现方式会不同吗？

<img src="images/leaf.gif"/></button></div>

另请注意，根据您发布的代码，您将text-align: center应用于空div。

“文字对齐：中心;”让我的右键离开页面

2 个答案: