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

回答

相關問題