2016-07-25 63 views
0

我創建了一個響應式網頁,圖像作爲背景,另一個圖像(徽標)以頁面爲中心。如何將文字置於中央圖像響應之下?

問題是我想把一個文本放在中心圖像(標識)下面的標題。我試圖用padding-top來放置它,但效率不高,響應速度也不是很快。

我想回應地把文字放在居中圖像下面。

這是我的代碼

@font-face { 
 
    font-family: 'Raleway'; 
 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 
p { 
 
    font-family: 'Raleway'; 
 
    color: white; 
 
    text-align: center; 
 
    padding-top: 60% font-size: 17px; 
 
} 
 
img.ri { 
 
    position: absolute; 
 
    max-width: 40%; 
 
    top: 10%; 
 
    left: 10%; 
 
} 
 
img.ri:empty { 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
@media screen and (orientation: portrait) { 
 
    p { 
 
    font-family: 'Raleway'; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    padding-top: 65% 
 
    } 
 
    img.ri { 
 
    max-width: 75%; 
 
    } 
 
} 
 
@media screen and (orientation: landscape) { 
 
    img.ri { 
 
    max-height: 85%; 
 
    } 
 
}
<body> 
 
    <img class="ri" src="assets/image/logo.png"> 
 
    <p>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 
</body>

+0

檢查我更新的答案。它可以正常工作,只要你想。 – Developer

回答

1

試試這個,我認爲這是你想要的。

logotext包裝在div e.g: <div class='wrapper'>中,並將css應用於此類。

CSS

.wrapper { 
    width:100%; 
    text-align:center; 
    padding-top:15%; 
    position:relative; 
} 

下面是修改片段

@font-face { 
 
    font-family: 'Raleway'; 
 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 
html, 
 
body { 
 
    margin: 0; 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
    overflow:auto; 
 
} 
 
.wrapper { 
 
    width:100%; 
 
    text-align:center; 
 
    top:30%; 
 
    position:relative; 
 
} 
 
p { 
 
    font-family: 'Raleway'; 
 
    color: black; 
 
    text-align: center; 
 
    font-size: 17px; 
 
margin-top: 5px; 
 
max-width: 70%; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 
img.ri { 
 
    max-width: 40%; 
 
}
<body> 
 
    <div class="wrapper"> 
 
    <img class="ri" src="http://dummyimage.com/200x200/3498db/fff"> 
 
    <p>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 
    </div> 
 
</body>

+0

它不工作,圖像在頂部和文字之間的差距太寬 –

+0

它現在好了,看看。 –

+0

此外圖像響應。 –

0

試試這個:

<body>  
<figure> 
<img class="ri" src="assets/image/logo.png"> 
<figcaption>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</figcaption> 
</figure> 
</body> 
+0

nope不工作,文字停留在中間頂部不低於圖像 –

0

.member { 
 
    display: inline-block; 
 
    width:31%; 
 
    vertical-align: top; 
 
    text-align:center; 
 
    position:relative; 
 
} 
 
.name { 
 
    display: inline; 
 
} 
 
.member img { 
 
    width: 100%; 
 
    display: block; 
 
}
<div id="design-cast"> 
 
    <h4>Design</h4> 
 

 
    <div class="member"> 
 
     <img src="http://i.imgur.com/zmPeyso.png" class="img-responsive img-thumbnail" alt="Responsive image" /> 
 
     <div class="name">Name Description</div> 
 
    </div> 
 
</div>

+0

圖像甚至不在中心 –

1

我認爲你想這樣的事情,嘗試Fiddle

@font-face { 
 
    font-family: 'Raleway'; 
 

 
    src: url('assets/font/Raleway-Thin.ttf') format ('ttf'); 
 
} 
 

 
html, body{ 
 
    margin:0; 
 
    height:100%; 
 
    overflow:hidden; 
 
} 
 

 
body { 
 
    background-image: url('assets/image/bg.png'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
p{ 
 
    font-family: 'Raleway'; 
 
    color:#000; 
 
    text-align: center; 
 

 
    font-size: 17px; 
 
    
 
} 
 

 
.center 
 
{ 
 
left:0; 
 
right:0; 
 
top:0; 
 
bottom:0; 
 
margin:0 auto; 
 
position:absolute; 
 
position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}
<body> 
 
<p class="center"> <img class="ri" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><br>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</p> 
 

 

 
</body>

+0

它適用於字體,但圖像不響應 –

+0

您可以使用引導程序製作響應圖像或在css中給它百分比​​ –

+0

圖像有什麼問題 –