CSS text center lukt niet

[ThijsB_98]

Hi,
Ik ben momenteel bezig om een eigen website te ontwikkelen voor mijzelf en een kleine groep mensen. Ik ontwerp de website met behulp van Zurb's framework Foundation.
Mijn CSS-kennis is niet zo goed, tot nu toe nog zonder veel problemen behalve het probleem waarvoor ik dit topic maak

In onderstaand screenshot is de laatste rij van een tabel te zien. In deze rij wil ik graag het aantal resultaten (Wedstrijden in dit geval) laten zien met daarbij een pagina nummering. De functionaliteiten werken in beide gevallen al, alleen het design nog niet...


"25 wedstrijden gevonden" staat keurig links in de rij. Nu wil ik graag de pagina nummering ("1 2 3 > >>") gecentreerd in het midden hebben. Op het moment staat ie gecenterd tussen de "N van gevonden" en het einde van de rij. Maar ik wil graag dat ie de center pakt van de hele rij (linkerlijn tot rechterlijn) waardoor hij dus gecenterd is.

De code ziet er als volgt uit:

code:

<div class="cell medium-8">
    <div class="grid-x grid-padding-x grid-padding-x">
        <table class="tabel">
            <thead class="table_background">
            <tr>
                <th width="auto">#</th>
                <th width="150">Datum</th>
                <th width="auto" style="min-width: 291px;">Wedstrijd</th>
                <th width="auto" style="min-width: 153px;">Collega</th>
                <th width="auto" style="min-width: 135px;">Beoordelaar</th>
                <th width="auto"></th>
            </tr>
            </thead>
            <tbody>
            <?= $wedstrijden ?>
            <ul class="pagination text-center" role="navigation" aria-label="Pagination" data-page="1"
                data-total="8">
                <tr>
                    <td colspan="6" class="pagination tabelPaginaKiezen">
                        <label class="zoekResultaten"><?= $aantal ?> wedstrijden gevonden</label>
                        <?= $paginaNummering ?>
                    </td>
                </tr>
            </ul>
            </tbody>
        </table>
    </div>
</div>

De code van de laatste rij begint op regel 16 t/m regel 28

$paginaNummering bevat meerder Li's met daarbij de opmaak, bijv de blauwe border om "1". Geen enkele Li bevat een margin, float of text-align.

class "tabelPaginaKiezen" bevat:
text-align: center;
font-weight: bold;
border-top: 1px solid #206bbf;

class "zoekResultaten" bevat:
float: left;
font-style: italic;

[ Voor 29% gewijzigd door ThijsB_98 op 05-08-2018 13:14 ]

[NMe]

Tenzij je die "x wedstrijden gevonden" uit de flow trekt en absoluut positioneert, óf heel ranzig aan de rechterkant óók een kolom maakt die even breed is als de linker gaat dat je niet lukken. Text-align: center zet iets in het midden van de aan hem toegewezen ruimte en je hebt niet de hele ruimte aan die tekst toegewezen.

Verder: Hoe post je code? / Hoe gebruik je de code tag? Zo'n plaatje maakt je topic waardeloos voor andere mensen die het via de search vinden zodra je plaatje om wat voor reden dan ook niet meer online staat.

[XWB]

Dit ga je met de huidige opzet niet makkelijk voor elkaar krijgen omdat de markup niet klopt: een ul element hoort niet in een tbody te staan.

[ThijsB_98]

NMe schreef op zondag 5 augustus 2018 @ 13:10:
Tenzij je die "x wedstrijden gevonden" uit de flow trekt en absoluut positioneert, óf heel ranzig aan de rechterkant óók een kolom maakt die even breed is als de linker gaat dat je niet lukken. Text-align: center zet iets in het midden van de aan hem toegewezen ruimte en je hebt niet de hele ruimte aan die tekst toegewezen.

Ik heb de class "zoekResultaten" een position absolute gegeven. Dit heeft inderdaad het probleem opgelost. De paginanummering pakt nu de gehele rij als breedte ipv de beschikbare breedte.

Thanks!