2

このあたりを検索して、多くの回答を得ましたが、機能していないようです。私が持っているのは、div を埋める画像を含む div です (レスポンシブにするために 100%)。画像に情報を入れたいので、記事を使用しました。しかし、私の問題は、ページを縮小している間、記事を画像の中央 (水平および垂直) に残すことができないことです。水平方向にはうまく中央に配置されますが、垂直方向には消えてしまい、下の部分が乱れます (ただし、まだ作業していません)。どんな解決策でも大歓迎です。ありがとう。

HTML:

    <div class="featuredpost">
    <img src="images/forest.jpg">

    <div  class="featured"> 
        <article>
            <header>
                <h1><a href="#">Featured Post Goes Here</a></h1>
            </header>

            <footer>
                <p class="postedby">Postedby User</p>
            </footer>

            <content>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </content>

            <button type="button" onclick="alert('Hello world!')">Read More</button>
        </article>  
    </div>  
</div>

CSS:

.featuredpost{
width: 100%;
margin: 0 auto; 
}

.featuredpost img{
    width:100%; 
    height: auto;
    position: relative;
}

.featured{
    margin: 0 auto;
    width: 80%; 
    background-color: rgba(0,0,0,0.5);  
    color: #fff;    
    top:50%;
    position: absolute;
    left: 10%;
}

.featured article{
    padding: 10px 30px;
}
4

3 に答える 3

0

html/body を 1 つのテーブル セルのように動作するように設定できます。

http://codepen.io/anon/pen/Iplbv

html {
  display: table;
  height: 100%;
  width: 100%;
  background-size: cover;
}
body {
  display:table-cell;
  vertical-align:middle;
}
.featured{
    margin: 0 auto;
    width: 80%; 
    background-color: rgba(0,0,0,0.5);  
    color: #fff;
  position:relative;
}
.featuredimg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

また、画像を背景として設定することもできます:

http://codepen.io/anon/pen/wKrae

html {
  display:table;
  height:100%;
  width:100%;
  background:url(images/forest.jpg);
  background-size:cover;
}
body {
  display:table-cell;
  vertical-align:middle;
}
于 2013-07-21T15:26:45.150 に答える