我有一些元素,div或任何有id的东西,我想把它放在网页上。 但是当它在电脑屏幕上看起来不错时,它在移动设备上看起来很糟糕 如何正确地使用任何框架(如bootstrap或其他东西),或者没有任何方法,jquery也是可能的。 它在所有移动设备和所有计算机浏览器上看起来都很好。 感谢。
答案 0 :(得分:2)
我会给你一个绝对中心(水平和垂直)位置的另一个解决方案,它永远不会失败并适用于我测试的每个浏览器(即8 +)。
您拥有 HTML
<div id="centered">
<!-- Place your content here -->
</div>
以下是绝对中心的 CSS (水平和垂直):
#centered{
width: 500px;
height: 500px;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
以下是您只想要垂直:
#centered{
width: 500px;
height: 500px;
position:absolute;
right:0;
left:0;
margin:auto;
}
只有横向:
#centered{
width: 500px;
height: 500px;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
答案 1 :(得分:1)
很简单。 的 HTML 强>
<div id="container">
<div id="content">
Your content here. It can be text, image or anything.
</div>
</div>
<强> CSS 强>
#container{
width:auto;
height: auto;
}
#content{
width:90%
height:90%;
margin:auto;
}
注意:强> margin auto实际上以对齐为中心,有时它取决于场景。有固定高度和宽度的地方,更容易。古德纳克
提示强>
如果你想看到对齐方式,你应该在设计过程中在CSS中使用#selector{border:solid};
然后你可以删除它..
答案 2 :(得分:1)
试试这个:
<div class="center">
<p>.........content...........</p>
</div>
现在CSS:
.center{
margin:0 auto;
width:500px; /*adjust your width*/
}
答案 3 :(得分:1)
CSS
.flexme{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
HTML
<div class = 'flexme' style = 'position:absolute; top:0; bottom:0; right:0; left:0; '>
<div id = 'div_you_want_centered' style = 'margin:auto;'>
This will be Centered
</div>
</div>
查看http://css-tricks.com/snippets/css/a-guide-to-flexbox/
第一个div占据整个屏幕并有一个显示:为每个浏览器设置flex。第二个div(居中的div)利用了display:flex div,其中margin:auto工作得很好。
注意 IE11 +(IE10带前缀)