应用于图

应用于图

关注
发信
关注(28)粉丝(399)

html - 将中心位置应用于图库，但不要应用于图片

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


谢谢你的帮助。

最佳答案

我会改变您定位#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%;
}


显然，您可以使用边距和宽度来使设计看起来完全像您想要的那样，但这应该会使您陷入困境。

关于html - 将中心位置应用于图库，但不要应用于图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18576121/

10-13 02:52
Powered by LMLPHP ©2025 应用于图 0.039153