使div标记在所有大小的计算机中居中
使div标记在所有大小的计算机中居中
提问于 2015-02-11 19:54:41
我有一个项目，其中有两个div标签；一个在左边(链接)，一个在中间(菜单)。左边的div标签可以正常工作，但是中间的div标签会引起我的问题……
我在家里的电脑上有很好的“链接”，但当我打开手机浏览网站时，因为我的电脑尺寸的“菜单”居中，所以它不会居中到小屏幕上。它实际上漂浮在右边。
我希望中间的div标签(上面写着“菜单”)在所有设备上都居中。我该怎么做？
代码如下：
CSS
h1 {
text-align: center;
border: 1px solid red;
border-radius: 25px;
}
body {
background: darkgreen;
}
* {
color: white;
}
#links {
position: absolute;
background: red;
width: 100px;
top: 70px;
left: 10px;
}
#menu {
position: absolute;
width: 50px;
top: 70px;
left: 830px;
}HTML
<h1>Spanish Practice</h1>
<div id = "links">
<h3>Links:</h3>
<ul>
<li><a href = "http://www.studyspanish.com">Study Spanish</a></li>
</ul>
</div>
<div id = "menu">
<h3>words</h3>
</div>回答 4
Stack Overflow用户
发布于 2015-02-11 20:07:55
如果您正在寻找更持久的解决方案，我会使用Bootstrap
它消除了所有可怕的定位问题。
使用bootstrap，你只需要下面的代码就可以达到你想要的效果。不需要css。
<div class='container'>
<div class='row'>
<div class='col-xs-12'>
<h1>Spanish Practice</h1>
</div>
</div>
<div class='row'>
<div class='col-xs-12'>
<div class='col-xs-4' id="links">
<h3>Links:</h3>
<ul>
<li><a href="http://www.studyspanish.com">Study Spanish</a>
</li>
</ul>
</div>
<div class='col-xs-8' id="menu">
<h3>words</h3>
</div>
</div>
</div>
</div>
<iframe width="100%" height="300" src="https://jsfiddle.net/neoaptt/m39mzvak/1/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Stack Overflow用户
发布于 2015-02-11 19:58:17
摆脱#menu的绝对定位和左侧规则，只需使用：
#menu {
margin:auto;
width: 50px;
top: 70px;
}自动页边距将使div在任何屏幕上居中。
h1 {
text-align: center;
border: 1px solid red;
border-radius: 25px;
}
body {
background: darkgreen;
}
* {
color: white;
}
#links {
position: absolute;
background: red;
width: 100px;
top: 70px;
left: 10px;
}
#menu {
margin: auto;
width: 50px;
top: 70px;
} <h1>Spanish Practice</h1>
<div id="links">
<h3>Links:</h3>
<ul>
<li><a href="http://www.studyspanish.com">Study Spanish</a>
</li>
</ul>
</div>
<div id="menu">
<h3>words</h3>
</div>
Stack Overflow用户
发布于 2015-02-11 20:12:33
使用标记<li>将使浮动向左或向右。如果它是menu width: 50px;中单个链接，您可以设置：
#menu a{
margin:0 auto;
}如果菜单选择器包含许多标记<li>，您可以将其浮动到左侧或右侧，并像上面一样设置它。否则，您可以包装它，例如：
.wrapper{
margin:0 auto;
width:300px; /* width is adjusted based on numbers of `<li>` menu*/
}
<body>
<div class="wrapper">
<div id = "links">
<h3>Links:</h3>
<ul>
<li><a href = "http://www.studyspanish.com">Study Spanish</a></li>
</ul>
</div>
</div>
</body>请注意，如果需要的话，只有在使用bootstrap的情况下，它才能完美地居中。这是简单的编码，并为您提供了很好的功能来处理您需要的所有事情。这是link。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28463278
复制相关文章
相似问题
腾讯云开发者
