My goal is to arrange numerous images in a row, with text displayed below each image. Each block of text may consist of multiple lines and should be centered. While the heights of the images may vary, their widths will remain consistent. It is important that all image bottoms align at the same height and all textbox tops also align. To provide a clearer representation:
One way to accomplish this layout is by utilizing a CSS table structure as shown below. Make sure to utilize the "baseline" property for vertical alignment. You can find a working sample here.
CSS:
.row {
display: table;
table-layout: fixed;
border: 1px solid grey;
}
.pic {
display: table-cell;
padding-left: 20px;
vertical-align: baseline;
}
.pic:first-child {
padding-left: 0;
}
.pic img {
vertical-align: bottom;
border: 1px solid red;
}
.pic p {
margin: 0;
text-align: center;
border: 1px solid #000;
}
HTML:
<div class="row">
<div class="pic">
<img src="http://dummyimage.com/100x60/000/fff" alt="ALT">
<p>Lorem<br>ipsum</p>
</div>
<div class="pic">
<img src="http://dummyimage.com/100x80/000/fff" alt="ALT">
<p>Lorem</p>
</div>
<div class="pic">
<img src="http://dummyimage.com/100x20/000/fff" alt="ALT">
<p>Lorem<br>ipsum<br>trying to break<br>everything</p>
</div>
<div class="pic">
<img src="http://dummyimage.com/100x40/000/fff" alt="ALT">
<p>Lorem<br>ipsum</p>
</div>
</div>
To create the desired effect, set the enclosing div to have the CSS property position: relative;. Then, apply the following CSS to the images:
#wrapper .img_class {
position: absolute;
bottom: 0px;
left: 20px; /* adjust this value as needed */
}
Here's a method that works well for me: check out the code on JsFiddle. While it may not execute the javascript directly on JsFiddle, copying the code into an HTML file will do the trick.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>images</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css" rel="stylesheet" href="css/site.css"/>
<script type="text/javascript">
var maxHeight;
function getMaxHeight(){
var imgs=document.getElementsByClassName("bottomAlignedImage");
if(imgs.length>0){
maxHeight=imgs[0].height;
for( var i=1; i<imgs.length; i++){
var currImg = imgs[i];
if(currImg.height>maxHeight)
maxHeight = currImg.height;
}
}
}
function applyMarginToImages(){
var imgs=document.getElementsByClassName("bottomAlignedImage");
for( var i=0; i<imgs.length; i++){
var currImg = imgs[i];
currImg.style.marginTop = maxHeight-currImg.height;
}
}
</script>
</head>
<body onLoad="getMaxHeight();applyMarginToImages();">
<table>
<tr id="imgRow">
<td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x300/000/fff"/></td>
<td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x100/000/fff"/></td>
<td><img class="bottomAlignedImage" style="" src="http://dummyimage.com/100x150/000/fff"/></td>
</tr>
<tr id="imgTextRow">
<td class="center"><p>Big</p></td>
<td class="center"><p>Small</p></td>
<td class="center"><p>Medium</p></td>
</tr>
</table>
</body>
</html>
Your perfect answer can be found right here. It can easily be customized to suit your needs.
In the provided demonstration, I utilized <p> tags, but feel free to use <div> elements instead.
While I'm not an CSS expert, I do have a decent understanding of it. My current project involves creating an unordered list with unique icons for each item, along with changing the background color upon hover. I wonder if there's a way to achiev ...
I am facing an issue with a row that contains two columns. The first column has content that should be visible without overflowing, while the second column includes a long list that needs to be scrollable within the row. The challenge with responsive desi ...
Is it possible to retrieve the index of ul li elements with touchstart, similar to how it can be done with a click function? <ul id = "list" ontouchstart="touchStart(event,'issues')"> <li> ...
While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...
How can I center a single flex item in a container with justify-content: space-between in CSS? #container { display: flex; justify-content: space-between; } <div id="container"> <div class='flex-item'></div> . ...
I currently have a webpage set up with three tabs and an iframe that displays the content of the tab clicked. The source code for each tab's content is stored in separate HTML and CSS files. However, I've noticed that when a tab is clicked, the ...
I'm faced with a challenge involving a highly organized HTML string that contains numerous hyperlinks. I need to transform all of these links into bold text containing the word "XX1". Is there a way to accomplish this in PHP without relying on jQuery ...
I'm hoping for some help understanding the purpose of the ".embed-responsive-item" class in the code snippet below (Bootstrap code for responsive iframes, videos, etc.). It seems redundant to apply this class to the iframe element when it works just f ...
Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animati ...
I need to extract data from this website (disregard the Hebrew text). To begin, I must choose one of the options from the initial dropdown menu below: https://i.stack.imgur.com/qvIyN.png Next, click the designated button: https://i.stack.imgur.com/THb ...
I am facing an issue where the descriptions in my list of 100 items are longer than the width of the div, causing the text to be cut off. I want to display the full description on hover without affecting the layout of other items. Currently, when I hover o ...
I am having trouble loading data from a json file into an HTML file and using D3 to visualize it. Even though the file loads correctly and is verified with a 200 status, the contents are interpreted as null. Below are the contents of the json file: [{"to ...
update: After some trial and error, I managed to find a solution using jQuery and append() methods. From my PHP code, I created an array containing all the necessary information that I wanted to insert into the tab divs. I then encoded this array into JSON ...
Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. ...
I am encountering an issue with my CSS. Although I have successfully centered everything, I am facing a problem with the hover effect in CSS. Whenever I apply the active class or hover over an li element, the background color expands to 100%. Additionally, ...
I am currently using the most recent version of "primeng": "^12.2.0", and I am looking to implement my own custom theme for primeng. Despite searching through numerous blogs, I have yet to find a solution. In an attempt to create my cu ...
I need to create 5 divs aligned horizontally next to each other, spanning the width and height of the window. Each div should occupy 20% of the window width, and any overflow content should be hidden. Below is the CSS code for two of the divs: #container1 ...
I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...
I have written a script that triggers the appearance of a div where users can adjust the time settings for a timer. The functionality works perfectly on JSFiddle, with the div displaying as intended. However, when tested on other online IDEs such as Coding ...
I am currently working on a shopping cart project, specifically on the "previous orders" page to display order details. My goal is to output this information in an (.ejs) file. The data structure includes nested objects, and within one object, propertie ...