我需要为移动的设备居中div元素。这是我的网站:http://transporttest.cba.pl/在移动的设备上description 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;
}
}
2条答案
按热度按时间rmbxnbpk1#
要使媒体查询正常工作,您需要包括:
在标签之间。
https://www.w3schools.com/css/css_rwd_viewport.asp
jgovgodb2#
首先,使用
<meta name="viewport" content="width=device-width, initial scale= 1.0">
因为它会自动适合您的网页的宽度的设备。
其次,应该使用
margin-left=auto; margin-right=auto;
这将使内容,如果您的网页的中心屏幕的设备。
如果适合您,也可以使用
text-align="center"
。pidoss.
<meta name=viewport>
绝对应该用在网页中,因为它可以帮助设计师自动将网页格式化为屏幕宽度。