如何将文字置于中央图像响应之下？

我创建了一个响应式网页，图像作为背景，另一个图像（徽标）以页面为中心。如何将文字置于中央图像响应之下？

问题是我想把一个文本放在中心图像（标识）下面的标题。我试图用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>

来源

2016-07-25 Idham Choudry

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

试试这个，我认为这是你想要的。

将logo和text包装在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>

来源

2016-07-25 09:05:00

它不工作，图像在顶部和文字之间的差距太宽 –

它现在好了，看看。 –

此外图像响应。 –

试试这个：

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

来源

2016-07-25 09:03:14 khushal

nope不工作，文字停留在中间顶部不低于图像 –

.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>

来源

2016-07-25 09:05:44 Developer

图像甚至不在中心 –

我认为你想这样的事情，尝试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>

来源

2016-07-25 09:15:04

它适用于字体，但图像不响应 –

您可以使用引导程序制作响应图像或在css中给它百分比 –

图像有什么问题 –

如何将文字置于中央图像响应之下？

回答

相关问题