0

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/

Gerard
  • 15,418
  • 5
  • 30
  • 52
asteatrem
  • 3
  • 3

5 Answers5

1

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/

Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40
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>
dangerousmanleesanghyeon
  • 571
  • 3
  • 11
0

Use Grid

change in css

.item {
  text-align:center;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 4fr;}
Chaitali
  • 11
  • 3
0

In my opinion flexbox would be unnecessary here because things are already lined-up. Adding a position: relative; to .item and

position: absolute;
right: 0;
top: 0;

to .switch should work just fine. Also remove float: right; from .switch.

first
  • 616
  • 1
  • 7
  • 13
0

drop the button tag on right hand side of h1 tag and it should be in the h1 tag

Rohit Kumar
  • 1