Как центрировать кнопку внутри пользовательского раскрывающегося списка div (клон нижнего колонтитула в стиле Netflix) ⇐ Html

[Anonymous]

Я хочу центрировать кнопку внутри пользовательского раскрывающегося элемента div

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
// =========================
// Trending slider
// =========================
const row = document.querySelector('.trending-row');
const prev = document.querySelector('.slider-control.prev');
const next = document.querySelector('.slider-control.next');

if (row && prev && next) {
const cardWidth = 180;
const gap = 32;
const step = cardWidth + gap;

prev.addEventListener('click', () => {
row.scrollBy({
left: -step * 4,
behavior: 'smooth'
});
});

next.addEventListener('click', () => {
row.scrollBy({
left: step * 4,
behavior: 'smooth'
});
});
}

// =========================
// FAQ accordion
// =========================
const faqItems = document.querySelectorAll('.faq-item');

faqItems.forEach(item => {
const btn = item.querySelector('.faq-question');
if (!btn) return;

btn.addEventListener('click', () => {
faqItems.forEach(i => {
if (i !== item) i.classList.remove('active');
});
item.classList.toggle('active');
});
});

// =========================
// Language dropdown
// =========================
const langBtn = document.querySelector('.lang-btn');
const langDropdown = document.querySelector('.lang-dropdown');
const langLabel = document.querySelector('.lang-label');
const langOptions = document.querySelectorAll('.lang-option');

if (langBtn && langDropdown) {
// Toggle dropdown on button click
langBtn.addEventListener('click', (e) => {
e.stopPropagation();
const isOpen = langDropdown.classList.toggle('open');
langBtn.setAttribute('aria-expanded', String(isOpen));
});

// Close when clicking outside
document.addEventListener('click', (e) => {
if (!langDropdown.contains(e.target) && !langBtn.contains(e.target)) {
langDropdown.classList.remove('open');
langBtn.setAttribute('aria-expanded', 'false');
}
});

// Handle option click
langOptions.forEach((opt) => {
opt.addEventListener('click', () => {
langOptions.forEach(o => o.setAttribute('aria-selected', 'false'));
opt.setAttribute('aria-selected', 'true');

if (langLabel) {
langLabel.textContent = opt.textContent.trim();
}

langDropdown.classList.remove('open');
langBtn.setAttribute('aria-expanded', 'false');
});
});

// Escape key closes dropdown
document.addEventListener('keydown', (e) =>  {
if (e.key === 'Escape') {
langDropdown.classList.remove('open');
langBtn.setAttribute('aria-expanded', 'false');
}
});
}
});

Код: Выделить всё

body{
background: black;
}

/* Language Controls */
.footer-controls {
margin: 12px 0 18px 0;
}

.lang-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #b3b3b3;
border: 1px solid rgba(179, 179, 179, 0.08);
padding: 8px 12px;
border-radius: 3px;
cursor: pointer;
font-size: 13px;
}

.lang-btn:hover,
.lang-btn:focus {
color: #b3b3b3;
outline: none;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.02);
}

/* ensure SVG icons inherit color */
.lang-btn .globe,
.lang-btn svg {
color: currentColor;
fill: none;
}

/* Brand and Recaptcha test */
.brand {
color: #b3b3b3;
margin: 8px 0 6px 0;
font-size: 13px;
}

.recaptcha-note {
color: #8c8c8c;
font-size: 13px;
margin: 8px 0 0 0;
}

.recaptcha-note .learn-more {
color: #4f8ef7;
text-decoration: underline;
}

.recaptcha-note a:hover,
.recaptcha-note a:focus {
color: #fff;
text-decoration: underline;
outline: none;
}

/* Accessibility: visible focus indicator for keyboard users */
a:focus-visible,
button:focus-visible {
outline: 3px solid rgba(79, 142, 247, 0.18);
outline-offset: 2px;
border-radius: 3px;
}

.footer-controls {
position: relative;
display: inline-block;
}

.lang-dropdown {
position: absolute;
top: 110%;
left: 0;
background-color: #0071eb;
border: 1px solid #555;
padding: 0;
border-radius: 0 0 3px 3px;
min-width: 100px;
display: none;
/* hidden by default */
z-index: 10;
}

.lang-dropdown.open {
display: flex;
justify-content: center;
/* only visible when .open is present */
}

.lang-option {
width: 90%;
margin: 4px auto;
border-radius: 2px;
padding: 8px 10px;
font-size: 13px;
text-align: left;
cursor: pointer;
/* Kill Native button styling */
border: none;
outline: none;
background: #0071eb;
color: #fff;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

.lang-option:hover,
.lang-option:focus-visible {
background: #0060c7;
}

Код: Выделить всё

English






English

Ниже приведен снимок экрана того, что я получаю:


Ниже приведен снимок экрана Netflix с DropDown:



Подробнее здесь: https://stackoverflow.com/questions/798 ... oter-clone