Estoy tratando de agregar un encabezado en el centro y un botón en el lado derecho para cambiar la página web al modo claro/oscuro y estar en la misma línea.
Este código tiene el encabezado en el centro y el botón a la derecha, pero no lo tiene en la misma línea.
Intenté resolverlo con otras publicaciones de stackoverflow pero no funcionaron.
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>Usar flexbox
Cambiar algunos CSS como
.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>Usar Grid
cambio en css
.item { text-align:center; display: grid; grid-auto-flow: column; grid-template-columns: 4fr;}