Why won't one of the tables stay centered like the other one?

Struggling to organize my portfolio. My photos are in tables, centered with CSS. But when I added a new table with a header and new photo, it's not centered properly. It centers only when the tab is minimized but not at full size. How do I fix this? Here's my code:

td {
  list-style-image: none;
  list-style-type: none;
  margin: auto;
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

tr {
  padding: 0;
  text-align: center;
}

.gallery:hover {
  -webkit-box-shadow: 2px 1px 20px 4px #707070;
  margin: 0;
  padding: 0;
  box-shadow: 2px 1px 20px 4px #707070;
}

img {
  width: auto;
  height: 200px;
  text-align: center;
  clear: none;
  float: left;
  padding: 0;
  margin: 0;
}

h1 {
  text-align: center;
  font-family: changa-one;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 400;
  text-transform: uppercase;
}
<h1>Photography</h1>
...your image html here...
  
...additional table html for Websites...

htmlcsshtml-tableportfolio

Answer №1

It seems like the img attribute in style.css is causing the second table to not center properly. Please review my code edits below:

td {
    list-style-image: none;
    list-style-type: none;
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

tr {
    padding: 0;
    text-align: center;
}

.gallery:hover {
    -webkit-box-shadow: 2px 1px 20px 4px #707070;
    padding: 0;
    box-shadow: 2px 1px 20px 4px #707070;
}

img {
    width: 200px;
    height: 200px;
    clear: none;
}

h1 {
    text-align: center;
    font-family: changa-one;
    font-style: normal;
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 0;
    font-weight: 400;
    text-transform: uppercase;
}

.center-table {
    width: 100%;
    margin: 0 auto;
}
<h1>Photography</h1>
<table>
    <tbody>
        <tr>
            <td><a href="img/1_big.jpg" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

            <td><a href="img/2_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/3_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/4_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/5_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/6_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/8_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/9_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/10_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/11_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/12_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            <td><a href="img/13_big.jpg" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>
</tr>
</tbody>
</table>

<h1>Websites</h1>

    <table class="center-table">
        <tbody>
            <tr>
                <td><a href="webs1/index.html" target="_blank"><img src="https://placehold.it/500x500" alt="" width="500" height="500" class="gallery"/></a></td>

                <td><a href="webs2/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

                <td><a href="webs3/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

                <td><a href="webs4/index.html" target="_blank"><img src="https://placehold.it/500x500" width="500" height="500" alt="" class="gallery"/></a></td>

            </tr>
        </tbody>
    </table>

I have included a new class for the table attribute:

.center-table {
    width: 100%;
    margin: 0 auto;
}

Answer №2

Check out this alternative example. It has a sleek design, is mobile-friendly, and easier to update.

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: center;
    width: 70%;
    margin: 0 auto;
}

.gallery a {
    display: block;
    grid-column-start: auto;
}

.gallery a:hover {
  box-shadow: 2px 1px 20px 4px #707070;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
}

h1 {
  text-align: center;
  font-family: changa-one;
  font-style: normal;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 400;
  text-transform: uppercase;
}
<h1>Photography</h1>
<div class="gallery">
    <a href="img/1_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/2_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/3_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/4_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/5_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/6_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/8_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/9_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/10_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/11_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/12_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>

    <a href="img/13_big.jpg" target="_blank"><img src="https://cdn.pixabay.com/photo/2015/01/07/15/51/woman-591576_960_720.jpg"></a>
</div>

<h1>Websites</h1>

<div class="gallery">
    <a href="webs1/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs2/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs3/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>

    <a href="webs4/index.html" target="_blank"><img src="https://cdn.pixabay.com/photo/2013/10/02/23/03/dawn-190055_960_720.jpg"></a>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps for including a header and footer with page numbers in an HTML page without disrupting the rest of the content when printing

When I print a page with a table that spans multiple pages, I want to ensure that my header and footer are included on every page. The code I've tried so far has treated the entire content as one continuous page. How can I achieve this? ...

javascripthtmlcss

table: column with percentage-based width AND a minimum width in pixels

Here is an example I'm working with: https://stackblitz.com/edit/js-ivvupc?file=index.html I need my table to be responsive, meaning it should become scrollable when the window size is reduced. The basic setup for this is already in place within the ...

htmlcsshtml-tableresponsive

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

I've been attempting to transform a collection of 4 divs in HTML into an array, but all my efforts seem to lead to the array becoming void. <div class="container"> <div class="shape" id="one"></div> <div class="sh ...

javascripthtmlarraysdom

Alteration of Content Height Input

I have designed a layout that I am excited to experiment with more in the future. Here is the current structure of my HTML: <!DOCTYPE html> <html> <head> <title>Title</title> <link rel="stylesheet" type="text/css" hre ...

htmlcss

Transferring parameters from HTML to CSS using Less and addressing two key design problems

I am currently in the process of designing a webpage, and I've encountered three distinct issues - two are related to pure .css, while one is related to less. Firstly, I have set margin: auto and padding: auto on the body tag, but it's not cente ...

cssless

Utilizing Bootstrap 5 with either a 16 or 24 column grid system minus the need for Sass

I'm looking for assistance in adjusting Bootstrap 5 to have either a 16 or 24 column grid rather than the default 12 columns. I attempted using Bootstrap Customize but found it to be an older version. I want the flexibility to change the grid from 12 ...

htmlcsstwitter-bootstrapbootstrap-5

Failing to verify the presence of specific text within a dropdown menu using Selenium

Previously, I successfully implemented this code, however, the HTML/CSS for the dropdown has since changed and now I am unable to get it to function correctly. Below is the structure for the dropdown code, with specific text highlighted that I am trying t ...

javascripthtmlcssseleniumselenium-webdriver

Objectives within the <button/> document

We are in the process of adding a new tab and I am following the existing code to make the necessary edits. However, I have encountered an issue at this specific point which is where the target page is being called. Could someone please explain how this pa ...

androidhtmlxml

"The combination of Windows, @font-face, and Cyrillic characters presents a

I am encountering an issue with font-face and Cyrillic characters. The fonts display properly in any browser on OS X, but fail to render on a Windows 7 machine (chrome, ie etc). Even after putting the fonts through Font Squirrel and testing the demo files ...

htmlcsswindowsfont-facewebfonts

Effortlessly apply CSS styles to multiple cached jQuery variables without redundancy

Hey there, I've got this piece of code written in Javascript for a classic ASP page. Since there are no CSS classes defined, everything is handled within the Javascript itself. var $a= $('#a'), $v= $('#v'), $s= $('#s'), ...

javascriptjquerycss

What is the best way to display a progress bar on a website to indicate loading status until the entire page has

Looking to display a progress bar or loading popup on my web page until it is fully loaded. The page is quite heavy due to the presence of an HTML editor using jQuery, which takes significant time to load. During this loading period, I want to have a prog ...

jqueryasp.nethtmlcss

Placing images in a webpage (HTML)

While everything works fine with the CSS code for hovering effects on these images, I am facing a challenge in re-arranging their position on the page. Currently, they are stacked vertically on top of each other. How can I make them appear side by side? ...

htmlcss

Finding the index of a table row based on its ID in TypeScript

Is there a way to retrieve the index of a specific row in a table using its ID without the need for clicking or looping through all rows? Here is an example of my HTML structure: <table id="tabId"> <tr id="a"> <td>ss</td> ...

htmlangulartypescript

Adding an arrow to a Material UI popover similar to a Tooltip

Can an Arrow be added to the Popover similar to the one in the ToolTip? https://i.stack.imgur.com/syWfg.png https://i.stack.imgur.com/4vBpC.png Is it possible to include an Arrow in the design of the Popover? ...

javascriptcssreactjstypescriptmaterial-ui

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...

javascripthtmlforms

Preventing Context Menu from Appearing on Long Click in HTML5 Games

I'm attempting to utilize a similar technique as demonstrated in this stackoverflow post: How to disable the 'save image as' popup for smartphones for <input> However, I am encountering an issue where my button is not displaying at ...

javascriptjqueryhtml

Where can I locate a specific child element in this scenario?

Currently, I am exploring the possibilities of integrating AngularJS into my application and have encountered a question regarding the click event implementation. Within my HTML code: <div ng-click='clickMe()' ng-controller='testCtrl&ap ...

javascriptjqueryhtmlcssangularjs

encountering difficulties when inserting a div in between slick.js slides

Incorporating slick.js with Angular, I am facing a challenge in adding a custom div with a dashed border after each image in my slick slider. This div should be positioned between the gaps of two slides. The slick slider is implemented with vertical scroll ...

htmljquerycssangularslick.js

Can I leverage Bootstrap's 5 grid system exclusively?

Previous iterations of Bootstrap allowed for the creation of custom setups, specifically focusing on the grid system. Is it possible to craft a tailored Bootstrap 5 configuration that exclusively includes support for the grid system? ...

csstwitter-bootstrapbootstrap-5

After several interactions, the CSS files fail to load

I'm currently utilizing jQuery Mobile with 3 pages, and I've noticed that after navigating between the pages, the CSS is not being rendered properly. LoadCss.js $(document).on("pageinit",function(event) { $("#categoriesPage").on('pages ...

javascriptcssangularjsjquery-mobile