//抱歉格式错误,我在手机上...
当有人询问如何使页面居中时,答案如下:
margin-left:50%;
left:(-1/2 width);
我在宽度为 1000px 的网站上使用了此代码,因此它涉及到该网站不适合的屏幕。 现在,该网站以较小的屏幕为中心,并均匀地向左和向右移动。
假设我们的屏幕宽 600 像素:
200px are left
600px are on screen
200px are right
可以向右滚动,但左侧的像素无法到达...
我该如何解决这个问题来控制,在屏幕较小的情况下,我的网站有多少内容被拖动到左侧? 这对于手机尤其重要...
最佳答案
如果您担心不同的屏幕尺寸,那么我强烈建议使用媒体查询,但这也是设置居中元素的有用方法。只需使用 %
宽度而不是设置宽度,然后加上 margin: 0 auto;
查看 fiddle 以获得视觉帮助。 (如果这个答案根本不符合您的需求,那么我很乐意将其删除)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
你最好的选择(忽略我的投资组合中的 CSS。
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
@media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
您还可以使用 jQuery 动态查找宽度。
var width = $('div').width();
$('div').text(width);
关于html - 屏幕上的 CSS 中心页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19431308/