我创建了一个div,用于在图像上放置文本。
此处是代码:
<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>
我该如何解决? 谢谢!
答案 0 :(得分:0)
在浏览器中预览时按ctrl / command shift M ,然后它将显示您的网站在移动设备上的显示方式,您也可以将移动设备调整为平板电脑大小。 希望我回答得很好。
答案 1 :(得分:0)
<style type="text/css">
.wrapper{
background-color: red;
margin: auto;
width: 23%;
text-align: center;
padding: 4px 1px;
}
<div class="wrapper">
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>
我认为您也需要检查媒体查询https://www.w3schools.com/css/css_rwd_mediaqueries.asp
答案 2 :(得分:0)
轻松,固定边距!
<div style="text-align:center;position:absolute;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="margin: 0 0 15% 0;font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="margin: 0 0 15% 0;font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="margin: 0 0 15% 0;font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="margin: 0 0 15% 0;font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>
答案 3 :(得分:0)
您只需要将位置更改为相对位置
<div style="text-align:center;position:relative;height:36.75%;width:25%;top:9.25%;left:9.75%;background-color:red">
<br/>
<h3 style="font-size:100%;font-family:RightChalk;color:white">Helloo</h3>
<h4 style="font-size:75%;font-family:RightChalk;color:white">Text right here</h4>
<h5 style="font-size:85%;font-family:RightChalk;;color:white;text-align:left;margin-left:15%">Yes, i want<br/>No, i don't</h5>
<h5 style="font-size:70%;font-family:RightChalk;color:white">MANUAL HISTORY<br/>PRINCIPAL Story</h5>
</div>