如何将文本置于居中图像下方？
[英]How to put text below centered image responsive?
问题描述
我创建了一个响应式网页，其中图像为背景，另一个图像（徽标）以页面为中心。
问题是我想在带有标题的居中图像（徽标）正下方放置一个文本。 我尝试使用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>
4 个解决方案
解决方案1
2 已采纳 2016-07-25 09:05:00
试试这个，我想这就是你想要的。
将logo和text包装在div eg: <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>
解决方案2
1 2016-07-25 09:15:04
我想你想要这样的东西，试试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>
解决方案3
0 2016-07-25 09:03:14
尝试这个 ：
<body>
<figure>
<img class="ri" src="assets/image/logo.png">
<figcaption>THIS WEBSITE IS CURRENTLY UNDER MAINTENANCE</figcaption>
</figure>
</body>
解决方案4
0 2016-07-25 09:05:44
.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>
如何使居中的SVG图像和文本具有响应性？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.