如何将文本置于居中图像下方？

Question

I create a responsive web page with image as background and another image(logo) centered in page. 我创建了一个响应式网页，其中图像为背景，另一个图像（徽标）以页面为中心。

The problem is that I want to put a text right below the centered image (logo) with a title. 问题是我想在带有标题的居中图像（徽标）正下方放置一个文本。 I tried to put it using padding-top, but it's inefficient and not very responsive. 我尝试使用padding-top来设置它，但效率低且响应性不高。

I want to responsively put the text below the centered image. 我想响应地将文本放在居中的图像下面。

Here is my code . 这是我的代码。

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

Answer 1

Try this, i think this is what you want. 试试这个，我想这就是你想要的。

Wrap the logo and text in a div eg: <div class='wrapper'> and apply css to this class. 将logo和text包装在div eg: <div class='wrapper'>并将css应用于此类。

CSS CSS

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

Here is the modified Snippet 这是修改后的代码段

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

Answer 2

I think that you want something like this, try Fiddle 我想你想要这样的东西，试试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>

Answer 3

try this : 尝试这个：

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

Answer 4

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

如何将文本置于居中图像下方？

问题描述

4 个解决方案

解决方案1
2 已采纳 2016-07-25 09:05:00

解决方案2
1 2016-07-25 09:15:04

解决方案3
0 2016-07-25 09:03:14

解决方案4
0 2016-07-25 09:05:44

如何将文本置于居中图像下方？

问题描述

4 个解决方案

解决方案1 2 已采纳 2016-07-25 09:05:00

解决方案2 1 2016-07-25 09:15:04

解决方案3 0 2016-07-25 09:03:14

解决方案4 0 2016-07-25 09:05:44

解决方案1
2 已采纳 2016-07-25 09:05:00

解决方案2
1 2016-07-25 09:15:04

解决方案3
0 2016-07-25 09:03:14

解决方案4
0 2016-07-25 09:05:44