Is there a way to ensure that text is always displayed at the bottom of an image, perfectly aligned with the left edge of the image, regardless of the parent alignment?

I'm working on creating a layout in HTML/CSS/Bootstrap with an image and text below it. The challenge is to ensure that the text always starts at the left border of the image, regardless of its length.

Here's what I need the layout to look like: https://i.stack.imgur.com/GiJVI.png

The issue arises when I apply text-alignment:center; to the bootstrap grid columns containing the image and text. While this centers the picture, it also centers the text under it. However, my requirement is for the text to be aligned to the bottom left corner of the image, irrespective of the parent div's CSS!

This is the code snippet for one column of the Bootstrap grid:

<div class="container main-div">    
        <div class="row"> 

            <div class="col-auto col-md-3 col-xs-6 col-sm-4">
                <div class="card-d">
                    <img src="pics/tea.jpg"  alt="tea">
                    <div class="desc">
                    <span><h4>Tea | 1 Kg</h4></span>
                    <p>The price is : 56.0</p>
                    <button>View</button>
                    </div>
                </div>  
            </div>

CSS:

.main-div {
    width: 90%;
    background-color: white;
    padding: 5% 1%; 
    text-align: center;
    margin-left: auto;
}

.col-auto {
    position: relative;
    border: 1px solid blue;
    margin: 10px auto;
    padding-left: 6%;
    padding-bottom: 4%;

}
.col-auto .desc {
    width: 100%;
    justify-content: left;
    font-family: Arial;
    text-align: left;        

}

.col-auto img {
    width: 140px;
    height: 100px;
    padding: 5px;
    display: inline-block;
    margin: 0 auto;
    border: 1px solid #088837;
}
button {
    background-color: green;
    color: white;
}

Despite multiple attempts, the alignment remains unchanged:

https://i.stack.imgur.com/ZBVu7.png

Here's the link to my Fiddle:

https://jsfiddle.net/vrw7ph13/

htmlcsstwitter-bootstrapbootstrap-grid

Answer №1

It appears that the issue lies within your CSS targeting of direct children. When you use >, it selects only the direct descendants, but in this case, your .desc is not a direct child of col-auto.

I have made modifications to the jsFiddle for reference: https://jsfiddle.net/752bkhj9/3/

Your original code:

.col-auto > .desc

reveals that there is no direct child element named .desc within your .col-auto. I recommend checking your HTML structure.

Additionally, keep in mind that the text-align property is inheritable, meaning it inherits styles from its parent. Your attempt to override this rule using col-auto > .desc was ineffective because the > selector was targeting a non-existent element.

Answer №2

A common issue here is that your HTML does not contain .col-auto > .desc. Instead, it seems like you have 

.col-auto > .card-d > .desc
.

Instead of using:

.col-auto > .desc {
    width: 100%;
    position: relative;
    left: 0%;
    font-family: Arial;
    text-align: left;
}

You could consider trying:

 .col-auto .desc {
  width: 140px; /* this matches the width of your '.col-auto img' selector defined earlier */
  position: relative;
  left: 0%;
  font-family: Arial;
  text-align: left;
  margin: auto; /* This will center the div horizontally, aligning it with the left edge of the image */
}

Alternatively, if you prefer to maintain the parent-child relationship:

 .col-auto > .card-d > .desc {
  width: 140px; /* matching the width of your '.col-auto img' selector set previously */
  position: relative;
  left: 0%;
  font-family: Arial;
  text-align: left;
  margin: auto; /* This will center the div horizontally, aligning it with the left edge of the image */
}

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

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

javascriptphpjqueryhtmlforms

Error message: "An issue occurred with the Bootstrap Modal in

I've designed an AngularJS app like so: <!DOCTYPE html> <html ng-app="StudentProgram"> <head> <title>Manage Student Programs</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2. ...

javascriptjqueryhtmlangularjstwitter-bootstrap

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

css

HTML - Lists Not Displaying Properly in Numerical Order

My goal with HTML is to: Produce 2 Numbered Lists Nest an Unordered List within Each Ordered List and add elements inside Unfortunately, my numbering isn't displaying correctly. Instead of 1. 2. etc., I'm seeing 1. 1. Below is the code I am u ...

htmlhtml-lists

Setting the width of colspan elements can be challenging when other columns have dynamic widths

I am working with a table setup that includes various columns for data tracking: <table > <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;"> <tr> <th colspan="3">& ...

csshtml

Determine line-height and adjust positions using JavaScript in the Chrome browser

I am creating a basic text reading application with a line to aid in easy reading. The functionality involves using the up and down arrow keys on the keyboard to adjust the position of a red line based on the line-height property. This is accomplished thr ...

javascriptjqueryhtmlcssgoogle-chrome

The cursor in a contenteditable element fails to return to its original position after adding a new line and then deleting it

I have come across a basic HTML code snippet: span { outline: none; } hello <span contenteditable="true"> world </span> Upon testing, I observed that each time I press ENTER within the contenteditable span, the cursor moves to a new ...

htmlcontenteditable

Mapping memory for FirefoxOS is like equivalent strides

Is there a way to create a memory mapped file in FirefoxOS, Tizen or other pure-JS mobile solutions? In the scenario of a mobile browser where you have large amounts of data that can't fit in RAM or you prefer not to load it all at once to conserve R ...

javascripthtmlfirefox-ostizengaia

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

How to execute a java class method within a JSP page

Is there a way to trigger a specific Java method when I click a button on a JSP page? I attempted using a scriptlet in the onclick event of the button to create an instance of the class and call the desired method, but unfortunately, it didn't yield t ...

javahtmljspmethods

Creating a versatile PHP script capable of managing multiple forms

Each time I develop a website for a client, I find myself in the same cycle of writing form HTML and then creating a PHP script to manage the data. Dealing with lengthy forms or multiple forms can make the process messy. Before diving into crafting a dyna ...

phpjqueryhtmlajaxforms

Display when moving up and conceal when moving down

Is there a way to make the div appear when scrolling up and down on the page? I'm new to jquery and could use some assistance, please. ...

javascriptjqueryhtmlcss

Aligning UL LI elements vertically for multi-line textORHow to vertically

I am dealing with a ul list that contains both single and multi-line li text. The issue is that the second line of the multi-line text starts at a different indentation than the first line. I need a simple solution to resolve this problem that works seaml ...

htmlcss

Setting up button value dynamically according to dropdown selection in Angular 2

I'm a beginner in angular 2 and I have a button with a dropdown. When I select an option from the dropdown, I want its value to be displayed on the button. The CSS code for styling the dropdown is provided below: .common_select_box { width: 100%; } ...

htmlcssangular

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

javascripthtmlcssevents

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

"Error" - The web service call cannot be processed as the parameter value for 'name' is missing

When using Ajax to call a server-side method, I encountered an error message: {"Message":"Invalid web service call, missing value for parameter: \u0027name\u0027.","StackTrace":" at System.Web.Script.Services.WebServiceMethodData.CallMethod(O ...

javascriptc#jqueryhtmlajax

Utilize JavaScript to append a CSS class to a dynamic unordered list item anchor element

I am working with a list of ul li in a div where I need to dynamically add CSS classes based on the click event of an anchor tag. Below is the HTML structure of the ul li elements: <div class="tabs1"> <ul> <li class="active"> ...

javascriptjqueryhtmlcsscss-selectors

Hide table cells using jQuery if they do not contain a specific content

Is there a way to conceal the td elements in a table that do not have the inline CSS attribute width:12%;? See code example below. <td class="" id=""> <td class="" id=""> <td class="" id=""> <td width="12%" class="" id=""><!-- ...

jqueryhtml