[英]How to center div element in mobile devices by CSS media queries
我需要为移动设备居中 div 的元素。 这是我的网站: http://transporttest.cba.pl/在移动设备上,描述 div 向左移动。我尝试使用媒体查询,但它不起作用。 我做错了什么? 在 PC 上一切正常。 这是我的代码片段:
HTML:
<div id="opis">
<h2>
<p style="line-height: 3cm; ">
♦ Od 1991 roku w branży. <br/>
♦ 9 zestawów (ciągnik+ naczepa firanka, colimulde). <br/>
♦ Uprawnienia ADR u każdego kierowcy.<br/>
♦ Warsztat obsługujący auta ciężarowe.<br/>
</p>
</div>
CSS:
#opis
{
font-size: 25px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: #F2F3F7;
height: auto;
width:72%;
display:inline-block;
text-align:center;
}
#container
{
text-align: center;
width:100%;
}
@media all and (max-width: 768px) {
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
left:25%;
top:25%;
position:absolute;
width:50%;
text-align:center;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
@media all and (max-width:640px){
#container{
wiidth:100%;
}
#opis,#opis_onas,#opis_dok,#opis_praca,#oskup,#opis_warsztat,#okredyt
{
width:72%;
height:auto;
display:inline-block;
text-align:center;
margin: 0 auto;
}
#menudol{
text-align:center;
display: block;
margin: 0 auto;
}
}
要使媒体查询起作用,您需要包括:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
标签之间。
正如有人已经评论过的那样,请确保将“ wiidth”更正为“ width”,然后可以尝试在要居中的div上设置宽度,然后添加:
margin-left:auto;
margin-right:auto;
使其居中在页面上。
首先,使用<meta name="viewport" content="width=device-width, initial scale= 1.0">
因为它会自动使您的网页适合设备的宽度。
其次,你应该使用margin-left=auto; margin-right=auto;
margin-left=auto; margin-right=auto;
如果您的网页位于设备屏幕的中心,这将使内容。
如果适合您,您也可以使用text-align="center"
。
PS <meta name=viewport>
绝对应该在网页中使用,因为它可以帮助设计人员自动将网页格式化为屏幕宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.