极客观点
项目管理
HarmonyOS
问题描述
想让html网页在手机和电脑显示时,元素都是居中的,但是我不太会前端,试过一些网上找的居中的方法还是不行,只好将长和宽以及边距等都写死,让手机端的显示是居中的(因为该页面访问基本都是手机端用户)
电脑页面
手机页面
问题出现的环境背景及自己尝试过哪些方法
使用过的方法:
1.设置left,top的百分比
main{
position: absolute;
top: 50%;
left: 50%;
margin-top: -5em;
margin-left: -9em;
width: 18em;
height: 10em;
}2.
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1em;
}相关代码
html代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>DADAGO&MVP快递单号查询</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/KDNWidget.js"></script>
<script src="../static/check.js"></script>
<style>
body {
color: #1F7B67;
font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
text-align: center;
background-image: url('../static/pictures/dada2.jpg');
position: fixed;
top: 35%;
left: 14%;
width: 100%;
height: 100%;
min-width: 400px;
z-index: -10;
zoom: 1;
background-color: #fff;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
#text-typed {
height: auto;
white-space: inherit;
border: 1px solid;
border-radius: 0;
width: 250px;
}
#content {
width: 300px;
height: 90px;
border: 1px solid red;
top: 50%;
left: 50%;
margin-top: 20px;
margin-left: -30px;
{#top: 70%;#}{#left: 70%;#}{#transform: translate(-36%, -50%);#}
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../static/typed.js"></script></head>
<body>
<div id="home">
<div id="search">
<div id="text-typed">
<h1><span id="head-title" style=" font-size: 18px;"></span></h1>
</div>
</div>
</div>
<div id="content">
<form id="myForm" method="post" action="/express_query">
<p>输入下单时的手机号查询</p>
<input id="phone_number" type="text" placeholder="手机号码" name="phone_number">
<input style="color: #ff7721" class="btn" type="button" value="查询" onclick=check()>
</form></div>
<script>
$("#head-title").typed({
strings: ["DADAGO^1000", "新型社交电商开拓者^1000", "致力于时尚潮流搭配的推广^1000"],
typeSpeed: 100,
loop: true,
startDelay: 60
});</script>
</body>
</html>
html5
了解下
媒体查询