Menu
Hello guys is really strange what happened to me today ... I'm working on a code to create submenus, and I used the property
display: -webkit-flex;
display: flex;
align-items: center;
in this way the voices of the various sections (tags li) are centered vertically. I have used these properties many times before for other codes and they have always worked correctly. As always, I check the code on my mac, on the iPhone 5, on firefox and chrome.
But as soon as I see the file via my iphone 5 (version 8.3) I was shocked .... the properties were not working. I have displayed the old files and even with them the same problem occurred.
The amazing thing is that the mc works wonderfully well with the iPhone 5 to my brother (updated to version 9.x):
I do not understand .... but how is that possible?
It 'a bug? or my iphone is broken?
548
To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .
All you need to do is add both justify-content: center and align-items:center and flex-direction:column to the Header's CSS rules. You can use this combination of flexbox properties to center any element, not just navbars. Images, divs, etc can all be absolutely centered within a parent element.
How to Center an Image with CSS Grid. CSS Grid works like Flexbox, with the added advantage that Grid is multidimensional, as opposed to Flexbox which is 2-dimensional. To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center ...
There is a flexbox bug in Safari:
The
<button>and<fieldset>elements can't be flex containers in Safari.
Solution: use a different wrapping element, e.g. an <a> tag.
If you can't or don't want to change the element, you can fix it using box-orient:
display: -webkit-box;
-webkit-box-orient: horizontal;
For me to get vertical and horizontal central alignment across Safari and Chrome on iOS and desktop I had to use:
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items: center;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
