How can I make a text appear strictly on the bottom of an image aligned with the left side borer of the above Image-regardless of parent alignment?

Question

I am trying to implement a view in HTML/CSS/Bootstrap where There is an image and some text immediately below the image BUT STRICTLY THE TEXT MUST START AT THE LEFT-SIDE BORDER OF THE IMAGE REGARDLESS OF THE LENGTH OF THE TEXT!

here is the required view:

Problem is If I apply text-alignment:center; to the divs of the bootstrap columns (I am using bootstrap grids here) the picture goes to the center of the div but the alignment of the texts below the pic also come centrally below the picture but as I stated earlier I wanted to align the text to the bottom left no-matter what parent css is!

Here is what I tried(I am including only one column of the bootstrap grid used as others also contain similar information):

<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;
    font-size:1em;
    border:0.1px;
    border-radius:3px;
    padding: 5px 10px;
}

After repeated try its the same I am getting:

Here is my Fiddle:

https://jsfiddle.net/vrw7ph13/

yes..not working..as the text length is small its getting centered@LuisGar — Achy97, Mar 31 '19 at 16:57
A solution could be removing text-align:center in main div and play with padding percentage — Luis Gar, Mar 31 '19 at 16:59
Please dont play a guess game..if you know and tried then..I have already played the guess game many times..nothing working — Achy97, Mar 31 '19 at 17:00
Removeing text-align:center in .main-div must work. If not, you are not showing all css. Not must. It works — Luis Gar, Mar 31 '19 at 17:03
All css is provided sir.. nothing hidden..thats all I am using — Achy97, Mar 31 '19 at 17:20
set the image to block instead of inline and target the span text-align or you can directly target the .desc with position:relative and change the position bottom and left — godfather, Mar 31 '19 at 17:24
provide a live example, text align left should work, somethings is wrong here. put those codes into jsfiddle or in similar service, so we can check it. — Hovhannes Sargsyan, Mar 31 '19 at 17:34
This is a typical case for the `figure` element and the `figcaption` tag if it is appropiate. — Aaron3219, Mar 31 '19 at 17:37

score 1 · Accepted Answer · answered Mar 31 '19 at 17:50

1

The problem is that in your css you have been targeting the direct children, when you write > it takes the direct children, but your .desc is not direct child of col-auto.

check my modified version of jsfidle https://jsfiddle.net/752bkhj9/3/

You have written

.col-auto > .desc

but you don't have direct child .desc in your .col-auto, check your html

And the text-align rule is inheritable, it inherits the styles from parent, you thought you were overwriting this rule using col-auto > .desc, but using > you were targeting non existing element.

answered Mar 31 '19 at 17:50

Hovhannes Sargsyan

1,063
14
25

1

It is working. However, in my opinion it would be a much cleaner solution if you would use the `figure` tag. This is exactly what it's meant for: https://jsfiddle.net/Aaron3219/c2jhus16/5/ – Aaron3219 Mar 31 '19 at 17:58
Thanks @Aaron3219 it was a great solution and special thanks for showing me the right and new (to me) way.. – Achy97 Mar 31 '19 at 18:07
@Aaron3219 We are not talking about markup, we are talking about style issues, if we were talking about markup I would had changed there not only figure tag, but many other stuff. And figure tag is not related to topic problem at all. I am not an author of original markup. Achy97 my friend, also when you have time please mark my answer as solution. Thank you. – Hovhannes Sargsyan Mar 31 '19 at 19:00
1

I know, this is the reason why I posted it as a comment to extend your answer. – Aaron3219 Mar 31 '19 at 19:02

score 0 · Answer 2 · answered Mar 31 '19 at 18:56

Yes, the problem is that there is no .col-auto > .desc in your html. Looking at your html you have .col-auto > .card-d > .desc

So instead of:

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

you could try:

 .col-auto .desc {
  width: 140px; /* this is the width of your '.col-auto img' selector set earlier */
  position: relative;
  left: 0%;
  font-family: Arial;
  text-align: left;
  margin: auto; /* use this to auto-center the div, but since it is the same width */
                /* as your img, it will auto-align itself with the left edge of the img */
}

or if you want to keep parent > child relationship:

 .col-auto > .card-d > .desc {
  width: 140px; /* this is the width of your '.col-auto img' selector set earlier */
  position: relative;
  left: 0%;
  font-family: Arial;
  text-align: left;
  margin: auto; /* use this to auto-center the div, but since it is the same width */
                /* as your img, it will auto-align itself with the left edge of the img */
}

How can I make a text appear strictly on the bottom of an image aligned with the left side borer of the above Image-regardless of parent alignment?

2 Answers2