Относительный контент центра в абсолютном расположении div

На веб-сайте, на котором я работаю, есть боковая панель fixed: 320px; слева, и я хотел бы, чтобы остальная часть страницы была разделом, содержащим центрированный контент.Относительный контент центра в абсолютном расположении div

Я нашел способ сосредоточиться на простом контенте, таком как текст: мое правое div имеет абсолютное положение, а right:0; + text-align: center; эффективно центрирует его содержимое. Но всякий раз, когда я пытаюсь помещать в него контент с относительной позицией, он больше не работает.

Относительное содержание, которое я пытаюсь сосредоточить, - это отзывчивая галерея с надписями при наведении.

what it looks like Вот

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%; 
    } 
}

Может быть, я должен попытаться изменить всю мою галерею код. Но, вероятно, не удастся найти эквивалентное решение, включая статическое позиционирование, верно?

(я знаю, что мои настройки медиа-запросы полностью перепутались вверх, это вопрос я разберусь позже.)

источник

2013-08-19 Laink

Я не могу себе воспроизвести ваш сайт. Но, возможно, эта статья может помочь вам http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ –

Вы разместили свой образ в .box DIV, который имеет float:left набор в CSS.

Создайте еще один класс окна (например, box-inline):

.box-inline{ 
    position:relative; 
    display:inline-block; // use this, to make the div behave like it would be part of the text, and it will be automatically aligned. 
    width:24%; 
    padding-bottom:31%; 
}

источник

2013-08-19 07:19:05 beerwin

Большое спасибо. Есть ли способ сделать галерею в центре, как блок, но не фотографии? Я обновил сайт: мне бы хотелось, чтобы фотографии второй строки начинались слева. – Laink

Я не совсем уверен, чего бы вы хотели достичь, можете ли вы мне это показать? Я также рекомендую задать этот вопрос как другой вопрос, чтобы другие люди могли его увидеть и предоставить решения. – beerwin

Относительный контент центра в абсолютном расположении div

ответ

Смежные вопросы