So zentrieren Sie eine Schaltfläche in einem benutzerdefinierten Dropdown-Div (Fußzeilenklon im Netflix-Stil) ⇐ HTML

[Anonymous]

Ich möchte die Schaltfläche innerhalb des benutzerdefinierten Dropdown-Divs zentrieren.
Mein HTML:

Code: Select all

English






English

Mein CSS:

Code: Select all

/* 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;
}

Mein Javascript:

Code: Select all

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');
}
});
}
});

Es folgt der Screenshot von dem, was ich bekomme:


Es folgt der Screenshot von Netflix mit DropDown: