CaiJimmy / hugo-theme-stack

Card-style Hugo theme designed for bloggers
https://stack.jimmycai.com
GNU General Public License v3.0
4.89k stars 1.6k forks source link

Cannot Make Table Item's Texts Center Horizontally #339

Closed ghost closed 3 years ago

ghost commented 3 years ago

Describe the bug

Normally, it should center text in the table when I write with colon but it doesn't work on my blog. image

| Default Header | Left Align | Right Align | Center Align | | -------------- | :--------- | ----------: | :----------: |

Expected behavior

Normally, it should center text in the table when I write with colon. It works correctly with GitLab & GitHub Markdown.

GitLab Markdown

Environment

Content of config.yaml

### ### baseurl: https://xxx.xxx.xxx
languageCode: en-us
theme: stack
paginate: 5
title: xxx

# Change it to your Disqus shortname before using
disqusShortname:

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, es, de, nl, it
DefaultContentLanguage: en

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon: xxx

    footer:
        since: 2021
        customText:

    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        emoji:
        subtitle:
        avatar:
            enabled: true
            local: true
            src: xxx

    article:
        math: true
        toc: true
        readingTime: true 
        license:
            enabled: true
            default: xxx
    comments:
        enabled: true
        provider: twikoo

        utterances:
            repo:
            issueTerm: pathname
            label:

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/client.html
        waline:
            serverURL:
            lang:
            visitor:
            dark:
            avatar:
            copyright:
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - name
                - email
            placeholder:
            locale:
                admin:

        twikoo:
            envId: xxx
            region:
            enable: true
            visitor: true
            path:
            lang: en-US

    widgets:
        enabled:
            - search
            - archives
            - tag-cloud

        archives:
            limit: 5

        tagCloud:
            limit: 10

#    opengraph:
#        twitter:
#            # Your Twitter username
#            site:
#
#            # Available values: summary, summary_large_image
#            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          pre: home
          params:
              newTab: false

        - identifier: xxx
          name: xxx
          url: xxx
          weight:
          pre: link

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            unsafe: true
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        noClasses: false
ghost commented 3 years ago

I mean it doesn't align horizontally. Vertically, it's ok. It might be about renderer.

CaiJimmy commented 3 years ago

Horizontal align works good for me:

image image

Vertical align does not seem to be part of GFM spec (correct me if I'm wrong): https://github.github.com/gfm/#tables-extension-

ghost commented 3 years ago

td { vertical-align: top; }

https://github.com/CaiJimmy/hugo-theme-stack/blob/5bf8bdcde2232921d56bd8e474c307fa19748599/assets/scss/partials/layout/article.scss#L378

The issue has been solved by editing vertical-align as center.