Objective: Aim to align the middle DIV (MIDDLE) within a flexbox row in the center.
Issue: The right element includes an input element with relative positioning. Consequently, the middle DIV element (MIDDLE) is no longer centered but instead shifted to the left.
I attempted changing the positioning to absolute. This successfully centers the element, but it restricts the movement of the input field.
const btnS = document.querySelector('.bg-search');
let isOpen = false;
btnS.addEventListener('click', (e) => {
const searchBox = document.querySelector('.searchbox');
const inputBox = document.querySelector('.searchbox-input');
console.log(e.target, isOpen)
if (isOpen === false) {
searchBox.classList.add('searchbox-open');
inputBox.focus();
isOpen = true;
} else {
console.log('close input')
searchBox.classList.remove('searchbox-open');
inputBox.dispatchEvent(new Event('focusout'));
isOpen = false;
}
});* {
margin:0;
padding:0;
box-sizing: border-box;
}
:root {
--nav-height: 50px;
}
nav {
height: var(--nav-height);
z-index:13;
background: green;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
gap:10px;
z-index: 20;
position: relative;
}
.body {
background: gray;
position: relative;
dispyay: flex;
flex-direction: column;
height:100vh;
}
.searchbox {
position:relative;
min-width:50px;
width:0%;
height:50px;
float:right;
overflow:hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s;
}
.searchbox-input {
position: relative;
top:0;
right:0;
border:0;
outline:0;
background:#dcddd8;
width:100%;
height:50px;
margin:0;
padding:0px 55px 0px 20px;
font-size:20px;
color: #000;
}
.searchbox-input::-webkit-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input::-moz-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-input:-ms-input-placeholder {
color: #000;
opacity:0.8;
}
.searchbox-open{
width:100%;
}
.searchbox-icon,
.searchbox-submit {
width: var(--nav-height);
height: var(--nav-height);
display:block;
position:absolute;
top:0;
font-family:verdana;
font-size:22px;
right:0;
padding:0;
margin:0;
border:0;
outline:0;
line-height:50px;
text-align:center;
cursor:pointer;
color:#dcddd8;
background:#172b3c;
}<div class="body">
<nav>
<div class="container bm-btn">
LEFT
</div>
<div>MIDDLE!!</div>
<div>
<form class="searchbox bg-search">
<input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp(this);" required>
<input type="submit" class="searchbox-submit" value="GO">
<!--button-- class="searchbox-icon">S</button-->
<span class="searchbox-icon">S</span>
</form>
</div>
</nav>
</div>