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:
|
|
|
|
|---|---|---|---|
| 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 ⭐🙏
