I'm trying to add a heading in the centre and a button on the right hand side to change the webpage to light/dark mode and be on the same line.
This code has the heading in the centre and the button on the right, but it doesn't have it on the same line.
Tried solving it with other stackoverflow posts but they didn't work.
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}body {
background-color: black;
color: white;
font-size: 25px;
-webkit-transition: .4s;
}
.dark-mode {
background-color: white;
color: black;
-webkit-transition: .4s;
}
.item {
text-align: center;
}
.item last-child {
float: right
}
.heading {
display: in-line;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
float: right;
margin-right: 10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: white;
}
input:checked+.slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color: black
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cats.</title>
</head>
<body>
<div class="item">
<h1 class="heading">Cats!</h1>
<label class="switch">
<input type="checkbox" onclick="myFunction()" checked>
<span class="slider round"></span>
</label>
<script src="scripts/script.js"></script>
</div>
</body>
</html>Use flexbox
Change Some CSS like
.item {
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
.heading {
flex:1;
}
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}body {
background-color: black;
color: white;
font-size: 25px;
-webkit-transition: .4s;
}
.dark-mode {
background-color: white;
color: black;
-webkit-transition: .4s;
}
.item {
text-align:center;
display: flex;
justify-content: center;
}
.item last-child {
float:right
}
.heading {
display:in-line;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
float:right;
margin-right:10px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color:black;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color:white;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
background-color:black
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Cats.</title>
</head>
<body>
<div class="item">
<div style='width: 100%'>
<h1 class="heading">Cats!</h1>
</div>
<div style='width: 0'>
<label class="switch">
<input type="checkbox" onclick="myFunction()" checked>
<span class="slider round"></span>
</label>
</div>
<script src="scripts/script.js"></script>
</div>
</body>
</html>Use Grid
change in css
.item {
text-align:center;
display: grid;
grid-auto-flow: column;
grid-template-columns: 4fr;}