I want to be able to use the common margin: auto
property, but with a minimum margin, such as:
margin: 0 max(auto, 16px);
This would center an element horizontally & still enforce 16px of margin on either side when the viewport is too small. but not worked min()
and max()
CSS with margin: auto;
for example:
I want to set style margin-left: 30px;
and margin-right: 30px;
for .navbar__menu
when screen lower 500px. (without use @media query)
.navbar__menu {
max-width: 500px;
height: 50px;
position: absolute;
top: 100px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background: red;
display: flex;
}
<div class="navbar__menu">
</div>
Use margin-inline: max(30px,50% - 500px/2)
and no need to set a max-width
.navbar__menu {
height: 50px;
position: absolute;
top: 100px;
left: 0;
right: 0;
margin-inline: max(30px,50% - 500px/2);
background: red;
display: flex;
}
<div class="navbar__menu">
</div>
More detail on my blog: https://css-tip.com/center-max-width/