Dipslay issue
Hi team,
i want to center logo but i get the below error
The browser says: The display: block property prevents align-items from having an effect. Try setting display to something other than block
if you have any solution for this issue
12 Replies
It’s saying align-items doesn’t work if it’s not a display: grid or display: flex. Put either on the parent of the icon and then you can justify -content and align items center to center your logo
Gap also only works with flex and grid
So you’ll want display flex on the bars-icon to center the fa-bars and then to center bars-icon within logo you can use flex, grid or use margin-inline: auto.
If you need more help please post the relevant code into a codepen
thanks for your help
i want to share my code but my Codepen account is not working
if you can check please
it looks to me like it's working https://codepen.io/MannixMD/pen/rNRvEVq i would't trust those helpers in dev tools to much they are fairly new addition and i noticed false warning multiple times already 🙂
yes it's working in the normal size
but in the small size like phones is not in the middle here is the picture
oh i see
try adding to
.search .container .logo in media query flex-grow:1 and in .search .logo-image also in media query margin-inline:auto;ok thanks i will tray it
hello bro,
thanks for you Help the provided code is working 100%
