Estoy trabajando en un proyecto HTML/CSS/JS y actualmente estoy editando un sitio web para agregar un panel de notificaciones. Así es como se supone que debe verse .

Así es como se ve el mío .

¿Cómo puedo alinear mis tres artículos?

Aquí está mi código JavaScript para escribir el HTML:

 function notifElement() { const notifUrl = 'https://smart4.io/centralizer'; const container = document.createElement("div"); //const aeL = document.createElement("a"); container.id = "notif"; const form = document.createElement("form"); const leftArrow = document.createElement("button"); leftArrow.name = 'leftButton' leftArrow.innerHTML = '&lt' const rightArrow = document.createElement("button"); rightArrow.name = 'rightButton' rightArrow.innerHTML = '&gt' const middleContainer = document.createElement("div"); middleContainer.id = "middle"; const middlebutton = document.createElement("button"); middlebutton.name = 'middleButton' const text = document.createElement('p') t.textContent = 'Lorem Ipsum'; middleContainer.appendChild(t); form.appendChild(leftArrow); form.appendChild(middleContainer); form.appendChild(rightArrow); container.appendChild(form); return container; }

Y aquí está mi código CSS:

 #notif { max-width: 720px; margin: auto; text-align: center; position: relative; width: 100%; height: 12em; z-index: 1; justify-content: center; } #notif > form { padding-right: 3em; } #notif > form > button { border-radius: 50%; }