Как выделить кнопки по середине на всю ширину?
HTML
<body id="container" class="dark">
<header id="start">
<div id="title">
<h1 class="text">Врата Штейна</h1>
<p id="org_title">Steins Gate</p>
<img id="main_img" src="assets/6627453519.jpg" alt="" />
</div>
<div id="turn">
<button id="turn_on">Светлая тема</button>
<button id="turn_off">Тёмная тема</button>
</div>
<div id="navigation">
<div id="main_characters">
<h2 class="characters">Главные герои</h2>
<ul id="nav_list">
<li class="nav_li"><a href="#Rintaro_Okabe">Ринтаро Окабэ</a></li>
<li class="nav_li"><a href="#Kurisu_Makise">Курису Макисэ</a></li>
<li class="nav_li"><a href="#Itaru_Hasida">Итару Хасида</a></li>
<li class="nav_li"><a href="#Mayuri_Sina">Маюри Сина</a></li>
</ul>
</div>
</div>
</header>
<main>
<article id="Rintaro_Okabe">
<h2 class="name">Ринтаро Окабэ</h2>
<img class="description_img" src="assets/210c8eb139f3a3fe731b13689dba8f92f71b1d08r1-768-512v2_hq.jpg"
alt="Rintaro_Okabe" />
<p class="description">
Восемнадцатилетний студент первого курса Токийского электротехнического
университета, но уже ощущает себя не только гениальным, но и, как это
принято у гениев, — сумасшедшим учёным. Доказывает это он рассказами о
таинственной «организации», которая неусыпно следит за студентом.
Основатель «Лаборатории гаджетов будущего». Любит поговорить по телефону
сам с собой и посмеяться как настоящий безумец. Его не всегда устраивает
собственное имя, и он зовёт себя Кёма Хооин (яп. 鳳凰院 凶真), что можно
перевести как «Феникс жестокой реальности». А вот его подруга детства
Маюри (позже к ней присоединяется Дару) называет гения «Окарин», просто
соединив первые буквы его имени и фамилии. Практически не выходит из
своей «Лаборатории гаджетов будущего», поэтому его легко издалека узнать
по белому лабораторному халату.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Это выбор Врат Штейна!” – Коронная фраза Окабе.</li>
<li class="quote_li">“Я великий безумный учёный, Хооин Кёма!”</li>
<li class="quote_li">“Гениальная извращенка” – Окабе говорит Курису.</li>
<li class="quote_li">“Это интеллектуальный напиток для избранных” – Окабе о Dr. Pepper.</li>
<li class="quote_li">“Эм… Hey mister, I am mad scientist. It’s soo COOOL! Sonuvabitch.” – Окабе торговцу
значками, на ломаном английском.</li>
</ul>
</article>
<article id="Kurisu_Makise">
<h2 class="name">Курису Макисэ</h2>
<img class="description_img" src="assets/sganime4.png" alt="Kurisu Makise" />
<p class="description">
Член «Лаборатории гаджетов будущего» № 004. Возраст — 18 лет.
Талантливая исследовательница неврологии в американском университете.
Когда ей было 17 лет, её исследование было опубликовано во
всемирно-известном журнале «Science» (в аниме название заменено на
«Sciency»). Окабэ часто называет её ассистентом или придуманным им
прозвищем — Кристина (саму Курису это очень раздражает). На первый
взгляд — спокойная девушка, краснеет, если кто-то незнакомый
приближается к ней слишком близко, но в душе — полная противоположность:
однажды заставила Окарина стоять на коленях три часа подряд, при этом
грозясь ударить его книгой. Всегда стоит на своём, не любит проигрывать
и не любит, когда кто-то пытается управлять ею.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Произошло что-то серьёзное, если ты зовёшь меня по имени” – Курису говорит Окабе.
</li>
<li class="quote_li">“Чувства людей – воспоминания, которые преодолели время.”</li>
<li class="quote_li">“Время летит так быстро. Сейчас я согласна с Эйнштейном. Время течёт быстрее или
медленнее в зависимости от восприятия. Теория относительности такая романтичная. И такая грустная.”
</li>
<li class="quote_li">(После поцелуя Окабе) ”Есть научное объяснение этого! Яркие воспоминания, например,
первый поцелуй, сохраняются в гиппокампе, и их труднее забыть.”</li>
<li class="quote_li">“Скажи правильно, Хооуин Трусы-Кёма!” – Курису говорит Окабе</li>
</ul>
</article>
<article id="Itaru_Hasida">
<h2 class="name">Итару Хасида</h2>
<img class="description_img"
src="assets/1988447_Portuguese(Brazil)_KeyArt-OfficialVideoImage_43e1e196-dab3-4e33-a1c1-028ec416d2c5.jpg"
alt="Itaru Hasida" />
<p class="description">
Известный под прозвищем друзей Дару — девятнадцатилетний подросток,
который учится на первом курсе Токийского электротехнического
университета. Также является членом «Лаборатории гаджетов будущего»,
занесённый в список под номером «003», где его «специализация» —
хакерские взломы. Ведь, несмотря на юный возраст, Дару отлично
разбирается и в программном, и в аппаратном обеспечениях компьютера. Но
эти умения никак не помогают ему в личной жизни. Неуверенный в себе с
излишним весом, Дару просто боится людей и общается только с помощью
компьютера. Для моральной поддержки выбрал культуру отаку. Дару не
социопат и не опасен для общества. Он самостоятельно выбирает
нетрадиционный образ жизни вне активного взаимодействия с другими
людьми. Он сам навешивает на себя ярлык отаку. Это юношеский протест и
своеобразный вызов, за которым на самом деле кроется ранимое сердце. И
если бы нашёлся неравнодушный человек, он бы смог расшевелить Дару,
выведя его из берлоги в люди.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Это не имеет никакого смысла!.. Умри! Черт возьми!”</li>
<li class="quote_li">“Human is dead… Mismatch.”</li>
<li class="quote_li">“Можешь сказать: 'Да кто будет есть твой банан, извращенец?'”- Дару говорит Курису.
</li>
<li class="quote_li">“Скажи: 'Твой банан мягкий'.” – Дару говорит Маюри.</li>
</ul>
</article>
<article id="Mayuri_Sina">
<h2 class="name">Маюри Сина</h2>
<img class="description_img" src="assets/scale_1200.png" alt="Mayuri Sina"/>
<p class="description">
Девушка, в свои шестнадцать лет ставшая членом «Лаборатории гаджетов
будущего» под номером «002», сразу за её главой. А всё потому, что она
неизменная подруга детства Ринтаро, и за это имеет право называть его
лично придуманным именем «Окарин». Себя же называет «Маюси». Немного
легкомысленна, что может быть следствием её увлечения — косплея, для
которого она любит придумывать и шить разнообразные костюмы. Кроме того,
Ринтаро про себя шутливо удивляется: «Похоже, у неё действительно ветер
в голове». Но, по его же словам, несмотря на всю её несерьёзность и
глуповатость, Маюри способна, как никто другой, подбодрить и будет
рядом, если тебе это нужно. Не сидит ни у кого на шее, самостоятельно
подрабатывает в мэйд-кафе, где официантки наряжены в костюмы горничных.
</p>
<p class="description">Цитаты</p>
<ul id="quotes">
<li class="quote_li">“Мы должны устроить мир во всём мире. Например, дать каждому по плюшевому Упе…”
–Маюри придумывает желание для Ди-мейла.</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян,
Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас
всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян,
Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас
всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
<li class="quote_li">“Посмотри, у нас появилось столько новых друзей: Дару-кун, Крис-тян, Руко-тян,
Сузу-сан, Моека-сан, Фейрис-тян, Браун-сан, Наэ-тян. Весной ты выглядел таким одиноким… Но сейчас
всё в порядке. Тебе больше не нужна Маюри в качестве заложника.”</li>
</ul>
</article>
</main>
<footer id="last_container">
<img id="last_img" src="assets/1572868653_DimCoordinatedBeagle-mobile.gif" alt="logo" />
<a id="begin" href="#start">Начало</a>
</footer>
</body>
CSS
body {
margin: 0;
padding: 0;
background-color: black;
}
#start {
display: flex;
flex-wrap: wrap;
gap: 200px;
margin-bottom: 200px;
justify-content: center;
}
#main_img {
width: 100%;
max-width: 900px;
margin-top: 20px;
border: 4px solid chocolate;
border-radius: 15px;
}
#title {
text-align: center;
flex-grow: 1;
}
h1 {
font-size: 70px;
font-family: 'Courier New', Courier, monospace;
margin-bottom: 0;
color: chocolate;
}
#org_title {
margin-top: 0;
font-size: xx-large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: chocolate;
}
#turn {
position: absolute;
top: 100px;
right: 100px;
}
#turn_on {
color: #ffe4c4;
font-size: 18px;
font-weight: 600;
background-color: #d2691e;
padding: 20px 40px;
border: none;
border-radius: 8px;
margin-right: 20px;
}
#turn_off {
color: #151414;
font-size: 18px;
font-weight: 600;
background-color: #d2691e;
padding: 20px 40px;
border: none;
border-radius: 8px;
}
#turn_on:hover {
transition: all 100ms;
outline: 3px solid dimgray;
}
#turn_off:hover {
transition: all 100ms;
outline: 3px solid dimgray;
}
#turn_on:focus-visible {
transition: all 100ms;
outline: 3px solid darkgrey;
}
#turn_off:focus-visible {
transition: all 100ms;
outline: 3px solid darkgrey;
}
#turn_on:active {
transition: all 100ms;
background-color: #d75d07;
color: #ffffff;
}
#turn_off:active {
transition: all 100ms;
background-color: #d75d07;
color: #000000;
}
#container {
transition: 500ms;
}
.dark {
background-color: #000000;
color: #d2691e;
}
.light {
background-color: #ffffff;
}
#navigation {
display: flex;
justify-content: center;
color: black;
background-color: chocolate;
height: 400px;
flex-basis: 300px;
border: 6px double black;
border-radius: 14px;
}
.characters {
text-align: center;
}
#nav_list {
display: flex;
flex-direction: column;
padding: 0;
text-align: center;
list-style: none;
gap: 40px;
}
a {
font-weight: 600;
color: black;
font-size: 24px;
font-family: 'Courier New', Courier, monospace;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
@media (min-width: 1420px) {
#navigation {
position: relative;
top: 300px;
right: 150px;
}
}
@media (max-width: 1420px) {
#turn {
position: relative;
}
}
@media (max-width: 960px) {
#start {
flex-direction: column;
align-items: center;
}
#navigation {
flex-basis: 300px;
width: 300px;
}
#main_img {
transition: all 200ms;
max-width: 600px;
}
}
@media (max-width: 634px) {
body {
position: absolute;
}
}
.characters {
font-size: 30px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
main {
display: flex;
flex-wrap: wrap;
gap: 250px;
flex-direction: column;
}
#Rintaro_Okabe, #Itaru_Hasida {
text-align: center;
display: flex;
align-self: center;
width: 80%;
flex-direction: column;
align-items: center;
line-height: 36px;
}
#Kurisu_Makise, #Mayuri_Sina {
align-self: center;
text-align: center;
display: flex;
width: 80%;
flex-direction: column;
/* margin: auto; */
align-items: center;
line-height: 36px;
}
.name {
color: chocolate;
font-size: 35px;
}
.description {
color: chocolate;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
#quotes {
color: chocolate;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
.quote_li {
text-align: start;
color: chocolate;
font-style: italic;
}
.description_img {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
border: 4px solid chocolate;
border-radius: 15px;
}
footer {
margin-top: 200px;
}
#last_img {
display: block;
margin: 0 auto;
}
#begin {
width: 100%;
height: auto;
display: block;
text-align: center;
font-size: xx-large;
font-family: 'Courier New', Courier, monospace;
flex-basis: 100%;
color: chocolate;
margin: 100px 0px;
}
#begin:hover {
text-decoration: underline;
}
Ответы (1 шт):
Автор решения: Алибек Бакибаев
→ Ссылка
Я так понял вам нужно поставить кнопку по центру в таком случае
#my_button {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}