[英]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.