如何在html页面中居中div标签而不受缩放的影响 [英] How to center a div tag in a html page without being affected by zooming
问题描述
我有一个带有一些div标签的html页面，无论是放大还是缩小，我都希望将 container div 放在电脑屏幕的中心。
I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.
我想以 www这样的方式修改我的html页面.bing.com 。缩小时，主页位于屏幕中央，而我的网页在缩放时不断扩展。
I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.
我的HTML页面代码：
My HTML pagecode:
<html>
<head>
<title>
HTML test page
</title>
<style>
.horizontal{
width:100%;
height:100px;
background-color: #bbb;
}
.vertical{
width:100px;
height:70%;
background-color: #bbb;
}
#container{
margin:auto;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<h1 style="font-size:3em; color:Green; text-align:center;">
HTML Test page
</h1>
</div>
</body>
</html>
如何调整我的CSS代码，以便实现与（www.bing。 COM）？我想按照 Ctrl + -
How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-
推荐答案
在查看了您刚介绍过的bing页面之后，我相信这就是您可能想要的内容
After looking that bing page you just referred us, I believe this is what you probably want this
<html>
<head>
<title>
HTML test page
</title>
<style>
body {
width: 100%;
height: 100%;
margin:auto;
}
#container {
vertical-align: middle;
margin:auto;
height:100%;
width:100%;
display: table;
}
span {
display: table-cell;
vertical-align: middle;
text-align:center;
font-size:5em;
color:#fff;
}
#inner {
margin:auto;
width:50%;
height:auto;
border:100px solid #bbb;
color:Green;}
</style>
</head>
<body>
<body>
<div id="container">
<div class="horizontal">
</div>
<div class="vertical" style="float:left;">
</div>
<div class="vertical" style="float:right;">
</div>
<div class="horizontal" style="float:left;" >
</div>
<span><div id="inner">HTML Test page</div>
</span>
</div>
</body>
</body>
</html>
这会为您的div创建一个100像素大小的边框，并按照您的要求居中对齐
This creates a 100px sized border to your div, which is aligned in center as you want
这篇关于如何在html页面中居中div标签而不受缩放的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
