Question

我想只使用CSS + HTML来做这件事。它必须适用于所有主流/最新浏览器 - 而不是IE 6。

我的代码如下：

<div id="left_arrow"> 
        <img src="images/left-arrow.png">
    </div>

#left_arrow {
    position: absolute;
    left: 0px;          
    margin: 10px 0 15px 0;  /* top, right, bottom, left */  
    padding: 5px 5px 7px 5px;   /* top, right, bottom, left */  
}

我尝试将该位置视为“绝对”，但如果浏览器大小发生变化，则箭头不会移动，我希望它始终位于浏览器的中心，无论大小如何。

编辑：

我希望它始终处于这个div的中心：

<div id="images" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
</div>

这是它所在的整个代码块：

<div id="compare_view" align="center">

    <div id="compv-navbar">
        <a href="#"><img src="icon1.png" id="icon1"></a> | 
        <a href="#"><img src="icon2.png" id="icon2"></a> | 
        <a href="#"><img src="icon3.png" id="icon3"></a> | 
        <span id="view_name"> text </span>
    </div>

    <div id="left_arrow"> 
        <img src="images/left-arrow.png">
    </div>

    <div id="right_arrow"> 
        <img src="images/right-arrow.png">
    </div>

    <div id="images" width="100%">
        <img src="image1.jpg" width="45%">
        <img src="image2.jpg" width="45%">
    </div>

    <div id="notice">
        Notice will be here.
    </div>

</div>

编辑2：如果没有CSS解决方案，jQuery解决方案也没问题。

编辑3：仍然没有接受者？凸块

Answer 1

我成功地使用“text-align：center”进行水平居中。对于垂直居中，试试这个：

.vBox {min-height: 12em;   display: table-cell;   vertical-align: middle; }

 <div class="vBox"> <p>Lorem Ipsum is simply dummy text </p> </div>

干杯，埃里克

无论浏览器窗口大小如何，如何将图像保留在页面中心？

1 个答案: