html - CSS在不同屏幕中居中一个div

标签 html css

我想知道如果我在更大的屏幕上查看此站点,此 css 和 html 中的 div 是否会保持在中心位置。因为我只在 16 英寸屏幕/显示器上工作。即使我在更大/不同的屏幕上移动或查看它,此代码中的 div 是否会留在中心? ?

HTML

<html>
 <head>
  <title>Midterm Practice</title>
  <link rel = "stylesheet" type = "text/css" href = "layout.css"/>
 </head>
  <body>
    <div id = "container">
      <div id = "navbar">
        <ul>

        </ul>
      </div>
    </div>
  </body>
</html>

CSS 规则

body{background-color: pink;}
#container{background-color: white;margin-left: auto;margin-right: auto;border: 1px solid white;border-radius: 15px;width: 1000px;height: 800px;}
#navbar{position:absolute;}

我刚开始接触 CSS,请不要添加高级或高于平均水平的答案

最佳答案

使用 margin-left: auto; margin-right: auto; 应该有你想要的效果。他们基本上会将 body 标签中的“容器”div 居中。您始终可以通过将容器的宽度减小到可以在浏览器中测试的宽度来自己测试它(Chrome 和 Firefox 的开发工具对于在浏览器中使用 CSS 非常有用)。

关于html - CSS在不同屏幕中居中一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9377099/

相关文章:

javascript - 无法单击按钮元素内的输入元素

jquery - 通过 jQuery 更改 CSS 属性显示简短的视觉过渡

html - Bootstrap 菜单重叠 navbar-header 适用于较小的屏幕

html - 如何在 Dreamweaver 和 notepad++ 等文本编辑器中组织代码?

html - CSS 文本和图像对齐百分比

jquery - 如何通过 jquery 模拟 anchor 击?

javascript - 将div的高度设置为窗口高度

html - 只有图片的部分不占用任何填充

html - 图像输入类型在 Chrome 和 Safari 中不显示空值

html - 打印样式时是否可以强制分页?