CSS在不同的屏幕中居中div [英] CSS Centering a div in different Screens

查看:171
本文介绍了CSS在不同的屏幕中居中div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想知道如果我在这个css和html中的div将保持在中心,如果我在较大的屏幕上查看此网站。因为我只工作在一个16英寸的屏幕/显示器。将在这个代码的div将保持在中心,即使我移动或查看它在一个更大/不同的屏幕? ?

I am wondering if the div in this css and html will stay at the center if I i view this site on a larger screen. since I am only working on a 16 inch screen/ monitor. will the div in this code will stay at the center even if I move or view it in a larger/different screen? ?

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,请不要添加超前或以上平均答案

I am just starting out with CSS please don't add advance or above average answers

推荐答案

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

Using margin-left: auto; margin-right: auto; should have the desired effect for you. They will basically centre the "container" div in the body tag. You could always test it out yourself by reducing the width of the container to something you can test in your browser (Chrome and Firefox's dev tools are useful for playing with CSS within the browser).

这篇关于CSS在不同的屏幕中居中div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆