How to Make Sure This Stays Centered, Even When Zoomed Out or In

How can I make sure this stays centered, even when zoomed out or in?

I added wrapper to contain all of them and just centered it with margin: 0 auto;

<html>
<head>
<title> Chaotix Studios </title>
<style>
* {
background-color:#E6E6E6;
font-family:Lato,Tahoma,Arial,Sans-Serif;
}
#wrapper {
margin: 0 auto;
width: 500px;
}

#coolMenu a:link{
color:#FFFFFF;
}
#top{
text-align:center;
padding-top:100px;
}
#coolMenu,
#coolMenu ul {
list-style: none;
}
#coolMenu {
float: left;
position:absolute;
}
#coolMenu > li {
float: left;
}
#coolMenu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
background-color:#000000;
}
#coolMenu ul {
position: absolute;
display: none;
z-index: 999;

}
#coolMenu ul li a {
width: 80px;
}
#coolMenu li:hover ul {
display: block;
}
#body-main{
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
<div id="top-wrapper">
<div id="logo">
<img src="http://i.imgur.com/4ReSeS7.png"><br>
<h3>Chaos Awaits.</h3><br>
</div>
</div>
</div>
<div id="body">
<div id="body-wrapper">
<div id="body-main">
<ul id="coolMenu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Mauricii</a></li>
<li>
<a href="#">Periher</a>
<ul>
<li><a href="#">Hellenico</a></li>
<li><a href="#">Genere</a></li>
<li><a href="#">Indulgentia</a></li>
</ul>
</li>
<li><a href="#">Tyrio</a></li>
<li><a href="#">Quicumque</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>

How do i make sure that the contents are centered when zooming out/in

You should use

margin-right:auto;
margin-left:auto;

How to make a fixed position centered after zooming the whole website out?

Just use the css from the site you referenced.

  <div id="container"> <!-- horizontal centering (margin:auto) -->
<div class="sidebar"> <!-- keep in screen when zooming (position:fixed) -->
<div class="logo"> <!-- vertical centering (height 50% of 100%) -->
<div class="something"> <!-- rearrange position (position absolute) -->
</div>
</div>
</div>
</div>

#container {
margin: auto;
width: 860px;
}
.sidebar {
width: 400px;
position: fixed;
height: 100%;
}
.logo {
height: 50%;
position: relative;
top: 0;
}
.something {
position:absolute;
}

How to keep content in position when zooming in and out on your browser

Try this

#down-button {
max-width: 200px;
max-height: 200px;
background-color: black;
border-style: none;
color: white;
font-family: 'Coiny', cursive;
position: absolute;
cursor: pointer;
margin: 0 auto;
bottom: 25px;
//margin-top: 500px;
}

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) {

}

Check out:
CSS-Tricks + device sizes and Media Queries

How to center a div tag in a html page without being affected by zooming

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>

This creates a 100px sized border to your div, which is aligned in center as you want



Related Topics



Leave a reply



Submit