Мне нужно центрировать элемент div и элемент textarea в одном и том же родительском div, и я попытался использовать display: block в текстовой области, и я все еще не могу центрировать эти два элемента. Я попытался установить родительский div для отображения: flex, но вся страница перекрывается, когда я делаю это. Какие-либо решения для этой проблемы? Вот код:
body {
background: #121212;
color: #ffffff;
font-family: "Overpass", sans-serif;
padding: 15px;
padding-top: none;
max-width: 750px;
margin: 0.1em auto;
}
.b {
font-weight: 500;
}
h1 {
text-align: center;
transition: 0.5s;
}
.i {
font-style: italic;
}
body::-webkit-scrollbar {
width: 1em;
border-radius: 5px 0px 5px 0px;
}
body::-webkit-scrollbar-track {
background: #121212;
border: none;
}
body::-webkit-scrollbar-thumb {
border-radius: 5px;
background-image: -webkit-linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}
select {
font-family: 'Overpass', sans-serif;
font-size: 1em;
background: rgb(20, 20, 20);
border: none;
color: #ffffff;
padding: 4px;
border-radius: 5px;
transition: 0.5s;
}
.button {
font-family: 'Overpass', sans-serif;
font-size: 1em;
background: rgb(20, 20, 20);
border: none;
color: #ffffff;
padding: 4px;
border-radius: 5px;
transition: 0.5s;
}
::selection {
background: rgba(128, 204, 95, 0.5);
}
-moz-::selection {
background: rgba(128, 204, 95, 0.5);
}
.body {
border-radius: 5px;
padding: 8px;
border: none;
}
a {
color: #ffffff;
background-color: rgba(7, 7, 7, 0);
text-decoration: none;
border-radius: 3px;
padding: 2px;
transition: 0.5s;
}
a:hover {
color: rgb(7, 7, 7);
background-color: #ffffff;
}
textarea {
display: block;
font-family: 'Overpass Mono', sans-serif;
border-radius: 5px;
background: rgb(30, 30, 30);
color: #ffffff;
border: none;
resize: none;
transition: 0.5s;
padding: 5px;
margin: 0.5vw auto;
}
a.inline {
text-decoration: underline;
}
select:hover {
background-color: rgb(50, 50, 50);
color: white;
}
a.b {
padding: 0px;
}
.fullloader {
background-color: #ffffff;
position: fixed;
height: 100%;
width: 0%;
float: left;
margin: 0%;
}
.body::-webkit-scrollbar {
width: 1em;
border-radius: 0px 10px 10px 0px;
}
.body::-webkit-scrollbar-track {
background: none;
border: none;
}
.body::-webkit-scrollbar-thumb {
border-radius: 5px;
background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
}
.body::selection {
background: rgba(82, 83, 170, 0.5);
}
-moz-.body::selection {
background: rgba(82, 83, 170, 0.5);
}
textarea:hover {
background-color: rgb(50, 50, 50);
}
.button:hover,
input:hover {
background-color: rgb(50, 50, 50);
color: white;
}
input {
font-family: 'Overpass', sans-serif;
font-size: 1em;
background: rgb(30, 30, 30);
border: none;
color: #ffffff;
padding: 4px;
border-radius: 5px;
transition: 0.5s;
}
div#divhtml {
transition: 0.5s;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Overpass+Mono&family=Overpass:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet">
<h1>Lorem Ipsum Dolor</h1>
<div style='height:42vw;padding:10px;max-width:725px;margin:0.01em auto;text-align:center;justify-content:center;'>
<textarea id='txthtml' rows='15' style='width:85vw;height:40vw;max-width:725px;'></textarea><br>
<div style='border-radius:5px;width:85vw;max-width:725px;margin:0.01em auto;overflow:none;'>
<div id='divhtml' class='body' style='width:inherit;max-width:725px;background:#888888;padding:5px;overflow:auto;margin:0.01em auto;height:50vw;'>
</div>
</div>
<br>
<div style='text-align:left;max-width:725px;margin:0.01em auto;'>
<div style='position:inherit;'>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at lacus laoreet, ultricies mi gravida, auctor mi. Maecenas sed malesuada magna. Donec vitae placerat quam, eu auctor metus. Aenean sit amet porttitor dolor. Suspendisse ligula mauris, lobortis sed laoreet vel, auctor ut diam. Aenean consequat eget metus at gravida. Suspendisse laoreet sem a vestibulum fermentum.<br><br>Ut ornare, tortor nec imperdiet pulvinar, erat enim sollicitudin orci, ut sollicitudin lectus dolor ac odio. Nullam eros ex, sollicitudin eu lacinia ac, vehicula non sapien. Quisque et odio eget erat pharetra placerat non at tortor. Vestibulum eu gravida justo. Integer auctor turpis vitae augue finibus volutpat. In vitae mollis leo, in facilisis neque. Donec viverra ex leo. Donec facilisis at purus ullamcorper vulputate. Nam a turpis ac leo tincidunt volutpat a et metus.</span>
</div>
<br>
</div>
</div>