我創建了一個響應式網頁,圖像作爲背景,另一個圖像(徽標)以頁面爲中心。如何將文字置於中央圖像響應之下?
問題是我想把一個文本放在中心圖像(標識)下面的標題。我試圖用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>
檢查我更新的答案。它可以正常工作,只要你想。 – Developer