绝对位置div中的中心相对内容[关闭]

问题描述 投票：2回答：1

我正在工作的网站左侧有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%;
   }
}

也许我应该尝试更改整个图库代码。但是可能无法找到包括静态定位的等效解决方案，对吧？

（（我知道我的媒体查询设置完全搞砸了，这是我稍后要解决的问题。）

html css center
1个回答
0
投票

您将图像放置在.box div中，该css中设置了float:left。

创建另一个框类（例如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%;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.