Arranging my pictures through CSS styling

Question

Arranging my pictures through CSS styling

Upon examining my webpage, I've noticed that the images are not properly aligned. My goal is to have the icons perfectly lined up; however, it seems there's a discrepancy depending on another cell, based on the size of the container where the time is inputted: https://i.sstatic.net/o87Bk.png

To illustrate the issue, I've created a fiddle. Could you kindly assist me with this? It appears that the problematic code lies within the CSS:

#list_item_thumbs .item {
    list-style: none;
    margin: 0;
    display: block;
    clear: both;
    overflow: visible;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding: 8px 0 0 0;
    height: 88px;
}

html css

Answer 1

Answer №1

Here are a couple of ways to tackle this issue:

The first option is to utilize a table, which will automatically align the columns for you.

Alternatively, you can assign fixed widths to your columns and give them specific classes like .datetime, .image, and .description

Then, simply apply a width value to each class as shown below:

.datetime {
    display: block;
    width: 25%;
}

.image {
    display: block;
    width: 25%;
}

.description {
    display: block;
    width: 50%;
}

Answer 2

Here are a couple of ways to tackle this issue:

The first option is to utilize a table, which will automatically align the columns for you.

Alternatively, you can assign fixed widths to your columns and give them specific classes like .datetime, .image, and .description

Then, simply apply a width value to each class as shown below:

.datetime {
    display: block;
    width: 25%;
}

.image {
    display: block;
    width: 25%;
}

.description {
    display: block;
    width: 50%;
}

Answer 3

Answer №2

Here are some styling suggestions for your images:

#list_item_thumbs .item_img img {
  display: block;
  margin: 0 auto;
}

To further enhance alignment, consider applying the following styles to the .item_age class:

#list_item_thumbs .item_age {
  min-width: 4em;  
}

https://i.sstatic.net/DE0bt.png

If you want to see a live demo, check out this link: https://jsfiddle.net/8172md5g/1/

Answer 4

Here are some styling suggestions for your images:

#list_item_thumbs .item_img img {
  display: block;
  margin: 0 auto;
}

To further enhance alignment, consider applying the following styles to the .item_age class:

#list_item_thumbs .item_age {
  min-width: 4em;  
}

https://i.sstatic.net/DE0bt.png

If you want to see a live demo, check out this link: https://jsfiddle.net/8172md5g/1/

Arranging my pictures through CSS styling

Answer №1

Answer №2

Similar questions

Creating Bootstrap columns with equal height and a button

Tips for adjusting the color of multi-line text when hovering with the mouse

Horizontal navigation bar encroaching on slideshow graphics

Incorporate a dynamic form into an ngx-sortable control in Angular 6

Applying the active state to the link will cause it to inherit the default styles of the

Interactive HTML/CSS Periodic Table with Dynamic Design

The functionality of the code in a stack snippet may differ from that in a standalone HTML file

Prevent Click Event on Angular Mat-Button

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

CSS animations do not seem to work properly on IOS devices

Optimal strategies for designing navigation bars on contemporary websites

Here's a unique version: "Create a table with a two-layered structure by placing the x-axis data at the top of the table and rotating all text horizontally to be vertical."

The slider on my iPad and Kindle Fire in Linux mode is not functioning properly

Is there a way to dynamically set the width of a CSS property value in React? I'm looking for a solution that allows for flexibility in adjusting

Uniform design across various phone screen sizes achieved using JQuery Mobile framework

Out of nowhere, JavaScript/jQuery ceased to function

OpenLayers' circular frames surrounding the icons

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

How can you trigger CSS transitions to happen multiple times?