0

我的网站由一个固定的侧边栏和一个包含画廊的包装组成。画廊在包装内成功居中，但我的问题是 text-align:center 属性也适用于图片

我没有足够的声望点来发布第二张图片，但基本上我希望第五张图片在第一张之下。

HTML：

<!DOCTYPE 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>
            <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>
     </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 />
        </p>
    </footer>

</div>

<div id="wrap">

<div id="content">
    <div class="box">
        <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 class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_2.jpg">
            <div class="meta">
                <h2>Tableau 2<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_3.jpg">
            <div class="meta">
                <h2>Tableau 2<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_4.jpg">
            <div class="meta">
                <h2>Tableau 4<h2>
                <h3>2013 - Acryllique - 81x65 cm</h3>
            </div></a>
        </div>
    </div>
    <div class="box">
        <a href="#"><div class="boxcontent">
            <img src="img/tableau_5.jpg">
            <div class="meta">
                <h2>Tableau 4<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;
    display:inline-block;
    width:24%;
    padding-bottom:31%;
}

.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{
    position:static;
    margin-top:0;
    width:100%;
    min-height:0;
    height:120px;
   }

   header{
    width:280px;
    margin:0 auto;
   }


   nav ul{
    margin:0 0 0 -15px;
   }

   #circle_pic, section, footer{
    display:none;
   }

   #wrap{
    position:static;
    margin-top:30px;
   }
}

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

谢谢你的帮助。

4

5 回答 5

1

我会改变你定位#sidebar和#wrap开始的方式。

我会将样式更改#sidebar为：

#sidebar {
    background-color: #FFFFFF;
    float: left;
    height: 100%;
    left: 0;
    min-height: 720px;
    padding: 15px 30px 0;
    position: fixed;
    text-align: center;
    width: 16%;
}

我所做的只是删除了硬编码width: 260px以使设计更易于使用，并删除了多余的left: 0. 如果我要继续改进设计，我会稍微更改其他声明，但这超出了问题的范围。

接下来，我会将样式更改#wrap为：

#wrap {
    float: right;
    margin-right: 1%;
    width: 78%;
}

最后将样式更改.box为：

.box {
    display: inline-block;
    float: left;
    padding-bottom: 31%;
    position: relative;
    width: 25%;
}

显然，您可以使用边距和宽度来使设计看起来完全符合您的要求，但这会让您陷入困境。

于 2013-09-02T15:03:07.437 回答
0

您可以在使用 div 的地方创建一个表格，以强制图像进入您想要的布局。然后无需担心 text-align: center; 在您的内容块中。

于 2013-09-02T15:09:34.643 回答
0

尝试更改text:align: center为text-align:leftfor #content，除非这会引入我看不到的问题（？）

于 2013-09-02T15:03:48.140 回答
0

text-align您可以改用 ，而不是将图像与 对齐float:left;。但是，根据您当前的 CSS/HTML，这会将图像向左移动太远。如果更改整个列表居中的方式，您可以做什么。

所以：

#content {
    padding:0 12%;
    /* remove the text-align declaration */
}

.box {
    float:left;
    width:50%;
}

这将是一个更灵活的布局。使用这些值来获得您想要的大小（例如，填充值......这可以是 % 或 em 或 px 值，因为它.box是基于 % 的。）

于 2013-09-02T15:07:06.393 回答
0

尝试使用last-child伪类：

.box:last-child {
    float: left;
    left: 121px;
}
于 2013-09-02T15:08:09.257 回答