How to align html table in center of page and elements inside the table with fixed width and centered

Project: codever - File: howto-get-started.component.scss

Set margin-left and margin-right to auto to align in center of the page/div and text-align to align the text and image inside of the table headers and cells:

.extensions-table {
  margin-left: auto;
  margin-right: auto;
  th, td {
    width: 8rem;
    text-align: center;
  }
}

Its use in html:

<div class="container">
    <h2>Get started</h2>
    <p class="lead">Codever is a bookmark and code snippets manager created and designed for Developers & Co.
      The following helpers and extensions will assist you along the way:
    <table class="extensions-table">
      <thead>
      <tr>
        <th align="center" style="width: 8rem;text-align: center;"><a
          href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
          rel="nofollow"><img src="./assets/img/bookmark-48.png" alt="Bookmark" ></a>
        </th>
        <th align="center" ><a
          href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
          rel="nofollow"><img src="./assets/img/chrome-48.png" alt="Chrome logo" ></a>
        </th>
        <th align="center" ><a
          href="https://addons.mozilla.org/addon/codever/"
          rel="nofollow"><img src="./assets/img/firefox-48.png" alt="Firefox logo" ></a>
        </th>
        <th align="center" ><a
          href="https://addons.mozilla.org/addon/codever/"
          rel="nofollow"><img src="./assets/img/intellij-48.png" alt="IntelliJ Logo" ></a>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td align="center" style="width: 8rem;text-align: center;"><a
          href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
          rel="nofollow">Bookmarklet</a></td>
        <td align="center" ><a
          href="https://chrome.google.com/webstore/detail/codever/diofdblfhjbpgackifolmboaiccmebjb"
          rel="nofollow">Chrome</a></td>
        <td align="center" class="ml-2"><a
          href="https://addons.mozilla.org/addon/codever/"
          rel="nofollow">Firefox</a></td>
        <td align="center" class="ml-2"><a
          href="https://plugins.jetbrains.com/plugin/14456-codever-snippets/"
          rel="nofollow">IntelliJ plugin</a></td>
      </tr>
      </tbody>
    </table>
</div>

The result looks similar to the following:

Bookmark Chrome logo Firefox logo IntelliJ Logo
Bookmarklet Chrome Firefox IntelliJ plugin

Reference - https://github.com/CodeverDotDev/codever


Shared with from Codever. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Codever is open source on Github ⭐🙏

Subscribe to our newsletter for more code resources and news

Adrian Matei (aka adixchen)

Adrian Matei (aka adixchen)
Life force expressing itself as a coding capable human being

Mongoose schema field from list of strings (enum)

Mongoose schema field from list of strings (enum) code snippet Continue reading

Set value of input field in angular template

Published on December 14, 2022

How to use jest test.each function

Published on December 14, 2022