tl; dr - Как я могу центрировать синий div на третьем изображении в белом пространстве, а не на странице?Проблемы с центрированием содержимого на документе с боковой панелью
В последнее время я испытываю головную боль. Я создал веб-сайт с двумя отдельными столбцами, но достигается только одним элементом div. Это можно увидеть ниже.
Это довольно очевидно из рисунка, что первый столбец должен рассматриваться как боковая панель, и, следовательно, имеет класс .sidebar. .sidebar имеет фиксированный width объект 400px. Остальная часть страницы - это остальная часть div с классом .container, которая распространяется на 100% как на ее width, так и на height . Поскольку я хотел бы, чтобы это было трудно сделать, просто прочитав этот текст, я нашел способ показать, как эта страница настраивается.
- Серый является
htmlэлементом. - Белый - это элемент
body. - Аква на белом - это
divс классом.container. - Следующая вода представляет собой
divс классом.sidebar.
Давайте теперь вставьте div, что дает мне проблемы.
Как вы можете видеть, один синий div был добавлен. Это класс .test, который просто устанавливает свойства width, height и margin. Как вы теперь видите, когда margin установлен в 0 auto, div центрируется в окне, а не в пробеле. Очевидно, что это ожидаемое действие.
Проблема, с которой я сталкиваюсь, заключается в том, что я понятия не имею, как я могу центрировать синий div в белом пространстве. Я не уверен, как бы я создал любую точную ширину пробела и, следовательно, не знал, как будет использоваться margin: 0 auto. Как бы я сосредоточил свой тестовый элемент в белом пространстве? Можно ли это сделать с помощью CSS и HTML?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome.</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300|Raleway' rel='stylesheet' type='text/css'>
<link href="https://www.codekaufman.com/assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="https://www.codekaufman.com/assets/css/alerts.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="banner-alert">Please excuse the mess. I'm currently working to improve the site. Thanks.
</div>
<div class="container">
<div class="side-bar">
<div class="temp-logo"></div>
<ul class="nav">
<li class="nav-button-disabled">About</li>
<li class="nav-button-disabled">GitHub</li>
<li class="nav-button-disabled">Contact</li>
</ul>
<a href="https://www.codekaufman.com/support/"><div class="emphasis-button-disabled">Support</div></a>
<div class="legal">Copyright © 2015 Jeffrey Kaufman. All Rights Reserved.</div>
</div>
<div class="test"></div>
</div>
</body>
</html>
@charset "utf-8";
* {
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
color: #000;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
color: inherit;
}
.container {
height: 100%;
}
.side-bar {
position: fixed;
top: 0;
left: 0;
width: 400px;
height: 100%;
background: #EEE;
}
.temp-logo {
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 150px;
background: #000;
}
.nav {
width: 200px;
margin: 0 auto;
margin-top: 75px;
list-style-type: none;
}
.nav-button {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: pointer;
transition: 0.5s;
}
.nav-button:hover {
margin-left: 20px;
}
.nav-button-disabled {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.6em;
cursor: default;
color: #AAA;
}
.nav-category {
margin-top: 40px;
margin-bottom: 20px;
font-size: 2em;
cursor: default;
border-bottom: 1px #000 solid;
}
.emphasis-button {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
color: #C30;
transition: 0.4s;
cursor: pointer;
}
.emphasis-button-enabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
left: 138px;
line-height: 45px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #C30;
transition: 0.4s;
cursor: pointer;
color: #EEE;
background: #C30;
}
.emphasis-button-disabled {
text-align: center;
position: absolute;
width: 120px;
height: 45px;
line-height: 45px;
left: 138px;
bottom: 70px;
border-radius: 5px;
border: 1px solid #AAA;
color: #AAA;
cursor: default;
}
.emphasis-button:hover {
color: #EEE;
background: #C30;
}
.legal {
font-family: 'Open Sans', sans-serif;
position: absolute;
font-size: 0.85em;
text-align: center;
width: 400px;
height: 20px;
left: 0;
bottom: 20px;
}
.test {
width: 600px;
height: 200%;
background: blue;
margin: 0 auto;
}
Именно то, что я искал, спасибо. :) – Jeffrey