How to center all spans in a div?

Asked Oct 19 '22 at 19:40

Active Oct 19 '22 at 19:40

Viewed 21 times

I've got this html:

<div class="ul">
    <span class="1"><a href="#">Example</a></span>
    <span class="2"><a href="#">Example</a></span>
    <span class="3"><a href="#">Example</a></span>
    <span class="4"><a href="#">Example</a></span>
</div>

And this CSS:

body {
    font-family: 'Courier New', Courier, monospace;
    margin: auto;
    background:var(--main-bg);
    color: var(--main-fg);
}


.ul {
    position: relative;
    margin: auto;
    width: 100%;
}

.nav span {
    position: relative;
    max-width: 100%;
    list-style: none;
    padding-left: 5px;
    text-align: center;
}

But none of the various centering methods in CSS work for it. They all just end up being in a single line, not centered at all.

asked Oct 19 '22 at 19:40

ecjwthx

2

text-align to the ul element – Temani Afif Oct 19 '22 at 19:42
Also, there is no class nav in HTML but a .nav in your CSS (but that won't fix anything anyway ;) ) – G-Cyrillus Oct 19 '22 at 19:48
@G-Cyrillus I excluded a bit of it for simplicity. – ecjwthx Oct 20 '22 at 18:47

How to center all spans in a div?

0 Answers0