<分区>
我正在处理的网站在左侧有一个 fixed: 320px; 侧边栏，我希望页面的其余部分是一个包含居中内容的 div。
我找到了一种将文本等简单内容居中的方法:我的右边 div 有一个绝对位置，并且 right:0; + text-align: center ; 有效地将其内容居中。但是每当我尝试将相对定位的内容放入其中时，它就不再起作用了。
我尝试居中的相关内容是响应式图库，悬停时带有字幕。
HTML:
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Jean Iturralde</title>
<meta name="description" content="Portfolio de Jean Iturralde"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.backstretch("img/wooden.png");
});
</script>
</head>
<body>
<div id="sidebar">
<header>
<h1><a href="#">Jean Iturralde</a></h1>
<nav>
<ul>
<li><a class="active" href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div id="circle_pic">
<div id="circle_pic_hover"><p>Jean<br />62 ans<br />Peintre<br /></p></div>
</div>
<section>
<div class="sidebar_title"><img src="img/quotes.png" class="icon" /><h2>Bienvenue,</h2></div>
<p class="main_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae magna quam, commodo vulputate nulla. Mauris fringilla mi sapien, in semper turpis. Aliquam consequat magna nec magna egestas vitae aliquet turpis lacinia. Praesent commodo commodo scelerisque. Maecenas dui urna, egestas vel commodo quis, adipisci.</p>
</section>
<footer>
<p>
Jean Iturralde<br />
Tous droits réservés<br />
Création : <a href="http://thomasiturralde.fr">Thomas Iturralde</a>
</p>
</footer>
</div>
<div id="wrap">
<div id="content">
<p>simple content works</p>
<div class="box"> <!-- relative content doesn't -->
<a href="#"><div class="boxcontent">
<img src="img/tableau_1.jpg">
<div class="meta">
<h2>Tableau 1<h2>
<h3>2013 - Acryllique - 81x65 cm</h3>
</div></a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
@font-face {
font-family: 'museo_sans500';
src: url('fonts/museo_sans_500-webfont.eot');
src: url('fonts/museo_sans_500-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/museo_sans_500-webfont.woff') format('woff'),
url('fonts/museo_sans_500-webfont.ttf') format('truetype'),
url('fonts/museo_sans_500-webfont.svg#museo_sans500') format('svg');
font-weight: normal;
font-style: normal;
}
body{
margin:0;
}
a{
text-decoration:none;
}
#sidebar{
position:fixed;
left:0;
height:100%;
min-height:720px;
background-color:white;
padding:15px 30px 0 30px;
width:260px;
text-align:center;
}
header h1{
margin:0 0 10px 0;
}
header h1 a{
color:#303030;
font-family: 'Lobster', cursive;
font-size:40px;
font-weight:normal;
margin:0;
}
header ul{
list-style:none;
margin: 0 0 0 -25px;
}
header li a{
float:left;
font-family:'museo_sans500';
font-size:15px;
color:#afafaf;
transition: all 500ms;
-moz-transition: all 500ms;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
-ms-transition: all 500ms;
border-top:solid 7px #ababab;
padding:8px 8px 0 8px;
}
header li a:hover{
color:black;
border-top:solid 7px #303030;
}
header li a.active{
color:black;
border-top:solid 7px #303030;
}
#circle_pic{
width:174px; height:174px;
-webkit-border-radius: 87px; -moz-border-radius: 87px;
background:url(img/profilepic.png) no-repeat;
margin:70px 0 20px 0;
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
#circle_pic_hover{
background-color:rgba(0,0,0,0.5);
width:auto; height:175px;
margin-top:175px;
overflow:hidden;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#circle_pic_hover p{
font-family: 'Open Sans', sans-serif;
color:white;
font-weight:400;
font-size:16px;
line-height:27px;
margin-top:45px;
}
#circle_pic:hover #circle_pic_hover{
margin-top:0;
}
section{
margin-bottom:40px;
}
.sidebar_title{
text-align:left;
}
.icon{
margin-bottom:-2px;
margin-right:10px;
display:inline;
height:30px;
}
#sidebar h2{
display:inline;
margin:0;
font-size:29px;
color:#d9d9d9;
font-family: 'Open Sans', sans-serif;
font-weight:400;
}
.main_text{
font-family:'museo_sans500';
color:#252525;
margin-top:0;
font-size:13px;
text-align:justify;
line-height:25px;
}
footer {
width:260px;
position:absolute;
left:50%;
bottom:5px;
margin-left:-130px;
}
footer p{
text-align:center;
font-family:'museo_sans500';
color:#959595;
font-size:11px;
margin-bottom:25px;
}
footer a{
color:#353535;
}
#wrap{
position:absolute;
left:320px;
top:30px;
right:0;
}
#content{
text-align:center;
color:white;
}
/*******/
.box{
position:relative;
width:24%;
padding-bottom:31%;
float:left;
}
.boxcontent{
position:absolute;
top:10px;
left:10px;
right:10px;
bottom:10px;
overflow:hidden;
}
.boxcontent img{
width:100%;
}
.boxcontent .meta{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-bottom:-52px;
background: #000;
background: rgba(0, 0, 0, 0.7);
color: #FFF;
padding: 10px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
font-family:'museo_sans500';
}
.meta h2,h3{
color:#b0b0b0;
margin:0;
}
.meta h2{
font-weight:bold;
font-size:15px;
margin-bottom:3px;
}
.meta h3{
font-weight:normal;
font-size:11px;
font-style:italic;
}
.boxcontent:hover .meta{
margin-bottom:0;
}
@media only screen and (max-width : 650px) {
/* Smartphone view: 1 tile */
.box {
width: 76%;
padding-bottom: 100%;
}
#sidebar{
width:100%;
min-height:0;
height:120px;
min-width:0;
z-index:1;
}
#circle_pic, section, footer{
display:none;
}
#content{
margin-left:20px;
padding-top:160px;
}
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 76%;
padding-bottom: 100%;
}
}
@media only screen and (max-width : 1390px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 38%;
padding-bottom: 50%;
}
}
也许我应该尝试更改我的整个画廊代码。但可能找不到包括静态定位在内的等效解决方案，对吧？
(我知道我的媒体查询设置完全搞砸了，这是我稍后会处理的问题。)