Question

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>pic</title>
  <link rel="stylesheet" href="/muvxky/pa1/style.css" />
</head>
<body><h1>pic</h1><div id="info_box" style="height: 20px"></div><hr><br><br><br>




<style type="text/css">

#wrapper_pic {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
  background-color: #EEE;
}

#header_pic {
    margin: 0 0 15px 0;
}

#left_pic {
    float: left;
    width: 150px;
    font-size: 70px;

}

#left_pic a{
    text-decoration: none;
    font-color: black;
}

#right_pic {
    float: right;
    width: 150px;
    font-size: 70px;
}

#right_pic a{
    text-decoration: none;
    font-color: black;
}


#middle_pic { 
    float: left;
    width: 730px;
}

#footer_pic {
    clear: both;
}

#middle_pic img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:650px;
}
</style>

<script>document.getElementById('info_box').innerHTML = 'info: No caption provided';</script>

<div id="wrapper_pic">
    <div id="header_pic">
        <b>Album:</b> 1 <a href='/album?id=1'> [ Go back to album ] </a><br>
        <b>Date Uploaded:</b> 2014-09-13<br>
    </div>
    <div id="container">
        <div id="left_pic">
            <a href='pic?id=xxxx'>&#8678;</a>       </div>
        <div id="middle_pic">
            <img class='center' src='http://www.welovesneakers.com/wp-content/uploads/2012/10/Air-Jordan-0.jpg'>
        </div>

        <div id="right_pic">
            <a href='pic?id=xxxxx'>&#8680;</a>      
        </div>
    </div>
    <div id="footer_pic"> </div>
</div>

<br><br><br><hr>Copyright</body></html>

示例的JSBin：http://jsbin.com/sagesezukuvi/1/edit

我希望michael jordan图片能够居中。理想情况下，无论屏幕大小如何，它都会居中，但我遇到的问题是将它集中在720p上。

编辑：

页面上包含的代码。

不仅焦距图片应居中，而且所有图像都应居中。

Answer 1

不是浮动所有内容，而是使用左右链接的绝对定位。你需要make parent wrapper_pic也有相对位置。

#left_pic {
    position:absolute;
    left:0;
    top:50px;
    width: 150px;
    font-size: 70px; 
}

#right_pic {
    position:absolute;
    right:0;
    top:50px;   
    width: 150px;
    font-size: 70px;
}

#wrapper_pic {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    background-color: #EEE;
    position:relative;
}

然后在中间容器中添加填充以给它空间。然后图像可以有自动边距，最大宽度为100％;这会将它限制在容器的大小。

#middle_pic { 
    padding:0 150px;
}

#middle_pic img {
   display:block;
   margin:0 auto;
   max-width:100%;
   height:auto; 
}

查看此处：http://jsbin.com/caqox/1/edit

Answer 2

你走了： http://jsbin.com/tugadedocaxa/1/

自动保证金是正确的做法，但你必须将它应用于div，而不是图像。此外，中心图像不应具有“浮动：左”。最后，中心div必须是最后一个（在两个箭头浮动div之后）。

CSS：中间列的中心图像（3）

2 个答案: