CSS：在（3）

-2

<!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 CSS：在（3）

欲居中乔丹图片。理想情况下，无论屏幕大小如何，它都会居中，但我有些问题只能以720p为中心。

编辑：

包括在页面上的代码。

不仅约旦图片应居中，但所有的图像应居中。

来源

2014-09-13 ParoX

你的问题是不是远程清楚，你甚至没有列出的问题区域，问题是完全依赖你的jsbin链接。请查看问题指南并尝试安捷伦。 – OneHoopyFrood 2014-09-13 19:06:54

你可以提供一些你已经尝试过的代码吗？ – 2014-09-13 19:14:15

他提供了代码（JSBin），他想要将图像居中。我不明白这个问题有什么不清楚的地方...... – 2014-09-13 19:16:16

而不是浮动一切，使用绝对定位为您的左和右链接。您需要使父代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

来源

2014-09-13 20:06:55

在这里你去： http://jsbin.com/tugadedocaxa/1/

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

来源

2014-09-13 19:14:04

它并不是未知的。你的箭头图像有很多空白区域，所以它看起来并不居中。选择页面内容以查看（'Ctrl' +'A'） – 2014-09-13 19:54:03

CSS：在（3）

回答

相关问题