Align-items center exemple

<style> body{background:blue} *{box-sizing:content-box} #navbar { background:white; height: 56px; padding: 0 16px; display: flex; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } #navbar *{cursor:pointer; display:inline-flex} @media only screen and (max-width: 487px) {#logo{display:none}} </style> <div id="navbar"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> </svg> <img id="logo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7lNTMtj6yE1Gr2S0vL5ZghGYpKfi9d-yWdm988TLmgGnE8Y_L-Rcol3fX7faRLGH5mDSV41eY52mKRoeh-F1wyUAaZpTsjbAXoHMIbaN7yKEgmqzeb1nXtcCSIno_qDZ9lZVgzSFrVSA/h63/manajmnt_code_logo.png" height="30" /> <input type="search" placeholder="search"/> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16"> <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-mic-fill" viewBox="0 0 16 16"> <path d="M5 3a3 3 0 0 1 6 0v5a3 3 0 0 1-6 0V3z"/> <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/> </svg> </div>

© Manajmnt code

Share to :

☷✎