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>https://jsfiddle.net/2p8f04d7/
>Solution :
Use flexbox
Change Some CSS like
.item {
text-align:center;
display: flex;
align-items: center;
justify-content: center;
}
.heading {
flex:1;
}
https://jsfiddle.net/lalji1051/0yckaw9h/1/