This code centers the buttons at the bottom (I couldn't think if what else you would mean by 'icons').
You say #nav-tab-control
is claiming the full width of the screen. That is actually needed to make it possible to center its contents. So because it didn't do it automatically, I've set the width to 100%
in the css:
#nav-tab-control {
position:absolute;
bottom:0;
left: 0;
width: 100%;
text-align: center;
}
.ui.pointing.secondary.menu.drawer { display: inline-block; }
This makes #nav-tab-control the full width of the page, and centers any text in it.
Then, the container of the icons is displayed as inline-block
, so it respects that centering.
If you don't want to center it in the whole screen, you can also set position: relative
to one of the parent elements. For instance to to center them inside the blue bar (also causing them to wrap):
I found it a bit hard to find out what your actual problem is. I thought I knew but now I', not so sure. I hope these hints will help you solve it.