Центрирование во Flexbox
В flexbox самый простой способ для центрирования чего-либо - установить содержащий элемент на display: flex; или display: inline-flex;, а затем добавить align-items: center; (это будет центрировать все содержимое по вертикали) иjustify-content: center (это для горизонтального центрирования).
Как это:
* {
margin: 0;
padding: 0;
}
.flex-container {
border: 5px solid red;
display: flex;
height: calc(100vh - 10px);
width: calc(100vw - 10px);
}
.center-everything {
align-items: center;
justify-content: center;
}
<div class="flex-container center-everything">
<strong>center me!</strong>
</div>
Поддержание соотношения сторон
Что касается поддержания соотношения сторон, вы можете определить height и width для каждого элемента.Если вам нужно, чтобы этот макет был адаптивным (иначе говоря, поддерживайте все пропорции при увеличении или уменьшении), вы можете использовать относительные единицы , чтобы гарантировать, что ваши пропорции фиксированы.
Создание элементов вЯкоря или кнопки с помощью обтекания
Создать элемент в кнопке так же просто, как обернуть его в теги <a></a> или <button></button>, которые являются встроенными тегами, которые должны поддерживать макет при использовании в качестве оберток.Затем вы можете настроить действия, выполняемые этими ссылками / кнопками, используя href, onclick или прослушиватели событий JavaScript (см. Мою демонстрацию ниже).Существует множество ресурсов в Интернете, если вы ищете что-то из этого.
Наложение и position: absolute
Что касается наложения, вы можете легко создать наложенный элемент, вложив его в контейнер и затем положиввложенный элемент над этим контейнером, используя position: absolute (это разрывает элемент из z-плоскости и позиционирует его относительно контейнера с position: relative).Вы можете установить height и width на 100%, так как этот вложенный элемент теперь относится к его контейнеру position: relative, поэтому эти настройки обеспечат наложение элемента на весь содержащий элемент.Затем вы можете позиционировать элемент, используя top: 0 и left: 0, что обеспечит прилегание элемента к двум сторонам его контейнера.
Хорошая статья по этому поводу: https://teamtreehouse.com/community/how-css-position-absolute-brings-the-overlay-element-to-the-front
Посмотрите эту демонстрацию с несколькими наложениями полупрозрачных цветов, используя position: absolute внутри контейнера position: relative (с забавным переключающим действием для ударов ногами):
const overlayYellow = document.querySelector(".overlay.yellow");
const overlayBlue = document.querySelector(".overlay.blue");
const buttonYellow = document.querySelector(".btn.yellow");
const buttonBlue = document.querySelector(".btn.blue");
buttonYellow.addEventListener('click', () => {
toggleOverlay('yellow');
});
buttonBlue.addEventListener('click', () => {
toggleOverlay('blue');
});
function toggleOverlay(color) {
const overlay = (color === 'yellow') ? overlayYellow : overlayBlue;
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
} else {
overlay.classList.add('hidden');
}
}
* {
margin: 0;
padding: 0;
}
.container {
background: red;
height: 100vh;
width: 100vw;
}
.overlay {
display: block;
height: calc(100% - 10px);
left: 5px;
opacity: 0.5;
position: absolute;
top: 5px;
width: calc(100% - 10px);
z-index: 1;
}
.overlay.yellow {
background: yellow;
}
.overlay.blue {
background: blue;
}
.overlay.hidden {
display: none;
}
.btn {
cursor: pointer;
height: 36px;
position: absolute;
right: 12px;
width: 180px;
z-index: 2;
}
.btn.yellow {
top: 12px;
}
.btn.blue {
top: 60px;
}
<div class="container">
<div class="overlay yellow"></div>
<div class="overlay blue"></div>
<button class="btn yellow">Toggle yellow overlay!</button>
<button class="btn blue">Toggle blue overlay!</button>
</div>