Question

我的网站由固定的侧边栏和包含图库的包裹组成。图库成功地在包装中居中，但我的问题是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%;
   }
}

感谢您的帮助。

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

显然，您可以使用边距和宽度来使设计看起来完全符合您的要求，但这应该让您处于一个粗略的位置。

Answer 2

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

Answer 3

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

所以：

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

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

这将是一个更灵活的布局。使用这些值来获取所需的大小（填充值，例如......这里可以是％或em或px值，因为.box是基于％的。）

Answer 4

尝试使用last-child伪类：

.box:last-child {
    float: left;
    left: 121px;
}

Answer 5

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

将中心位置应用于图库但不应用于图片

5 个答案: