Center the table cell element horizontally

Struggling to align a table cell element both horizontally and vertically? Currently, only managing the vertical alignment.

The images vary in size, calling for fluidity and compatibility with max-height and width...

Custom Style Sheet (CSS)

.prod-img {
  display: block;
  margin: 20px; 
  border:1px solid black;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  display: table-cell;
  vertical-align: middle;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
}

http://jsfiddle.net/mjx4xvgj/1/

htmlcss

Answer №1

Ensuring proper display:

  • Utilizing margin: auto and display: block for <a>.
  • Implementing display: inline-block for <img />

Code snippet:

.prod-img {
  display: block;
  margin: 20px; border:1px solid black;
  text-align: center;
  vertical-align: middle;
}
.prod-img a {
  max-width: 170px;
  height: 150px;
  line-height: 150px;
  display: block;
  vertical-align: middle;
  margin: auto;
}
.prod-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  max-height: calc(100% - 30px);
  margin: 0 auto;
  vertical-align: middle;
}

Preview of the code:

Fiddle link: http://jsfiddle.net/1zLLasfw/

Answer №2

Simply modify your CSS code like this to achieve the desired result:

.prod-img {
    display: table;
    margin: 20px; border:1px solid black;
    width : 100%;
}
.prod-img a {
    max-width: 170px;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.prod-img img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    max-height: calc(100% - 30px);
    margin: 0 auto;
}

This adjustment should help you accomplish your goal.

Answer №3

Applying this style could enhance your design

.product-image {
    outline: 2px dotted #333333;
    display: flex;
    justify-content: center;
    margin: 10px;
    width: 80%;
}
.product-image a {
    display: flex;
    align-items: center;
    height: 120px;
    max-width: 150px;
    text-align: center;
    justify-content: center;
}

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

Conceal div elements and retain their status when the page is reloaded or switched

I currently have 3 div elements displayed on a webpage: header-div fixed_menu_div page_cont Each of these divs are styled with the following CSS properties: #header-div { top:0; left:0; display:inline; float:left; } #page_cont { mar ...

javascriptjqueryhtmlcss

Identify modifications in the input and at the same time update another input

I currently have two input text boxes. My goal is to synchronize the content of the second input box whenever the first input box is changed. I attempted to achieve this using this code snippet. However, I encountered an issue where the synchronization on ...

javascriptjqueryhtml

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...

htmlcsshtml-lists

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

javascripthtmlcss

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

htmlcss

What is the reason behind every element in bootstrap being enclosed within an anchor tag?

I am currently delving into the world of bootstrap for the first time and encountering an issue with the grid system. Somehow, whenever I try to incorporate an - a href="#" - tag within the grid, it distorts the layout inexplicably. I have been struggling ...

phphtmlbootstrap-grid

Tips for creating a responsive CSS "drawing"

I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...

htmlcssresponsive-designresponsive

When adjusting the viewport size, CSS animated elements may shift unexpectedly in Firefox and Safari, while Chrome displays them correctly

This example demonstrates a simple code snippet: body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; } .container { animation: moves 5s ease 0s normal forwards; /* transform: trans ...

htmlcssfirefoxsafari

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

javascriptjqueryhtmlcss

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

Is there a way to specifically remove only the last row from a table?

Recently, I encountered a problem with my JS code that adds and removes table rows based on user interaction. Adding rows functioned perfectly, but the issue arose when attempting to delete rows. Instead of deleting only the last row as intended, all rows ...

javascripthtml

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

To enhance readability, the intricate code has been abstracted. Within our Angular 2 project, we are working with a component called <top-component> (LEVEL 1): <top-component> </top-component> This component includes a template known a ...

javascripthtmlangulartypescriptdataflow

"Customize Bootstrap layout to have a stable width for desktop screens and a flexible width for

I received a psd design with a background for html5-bootstrap development that needed to be responsive. The original psd had a width of over 1200px, with the main container around 900px wide and the background displaying correctly. When converting to HTML ...

csshtmltwitter-bootstrapresponsive-design

What is the best way to horizontally align my div content while ensuring it is responsive, alongside a sidebar and top menu on the same

I am facing an issue trying to center my div content responsively with a sidebar menu and a top menu using Bootstrap. However, when I require the side-menu file, my div content gets placed at the bottom of the page unexpectedly. I am only using Bootstrap 5 ...

phphtmlcssbootstrap-5center

"Incorporate Bootstrap drop-down and button together for a stylish group feature

I am looking to format the code below to resemble the layout shown in the image using Bootstrap 3.3. When there isn't enough space to show all elements in a single line, I want them to stack vertically so that each element utilizes the entire width of ...

htmlcsstwitter-bootstrapdrop-down-menubuttongroup

Blog HTML Editing Tool

Apologies for the simple question. I'm struggling to find the right plugin for blog writing that allows users to edit fonts and add images. I also need the ability to submit the generated HTML code into MySQL. Can anyone offer assistance with this pro ...

htmlmysqlpluginseditor

Gradually vanishing words while they glide across the screen

I want to achieve a similar effect seen in the game A Dark Room. The text in the game serves two purposes which I am trying to replicate: The new text is added above the old text instead of below it, pushing the older text down the page as the game progr ...

javascriptjquerycss

Searching for a div table using XPATH in Python

Struggling to extract data from a table using Selenium in Python. Any suggestions on how to achieve this? https://i.stack.imgur.com/rPlKR.png <div class="js--property-table-body project-property-table__body"> <span aria-hidden=&quo ...

pythonhtmlseleniumxpath

Effective Methods for Implementing CSS Variables within nth-child Selectors

Objective: To pass a variable successfully as a parameter to nth-child. The task is to make the third line turn green in the example provided. Dilemma: Currently, the parameter is being disregarded as a variable. Inquiry: Is achieving this possible? If s ...

css

Pick out grouped objects without the use of Javascript

I am looking to design a single page where the display of categorized items changes based on user selection. Ideally, I want this to be chapter/hash (:target) dependent, but checkboxes influencing state would also work. As an experiment, I am trying to ac ...

htmlcss