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/

Answer 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.

Answer 2

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 */
}