Как сделать так, чтобы текст отображался строго внизу изображения, выровненного по левому краю изображения выше, независимо от выравнивания родительского элемента?

Question

Я пытаюсь реализовать вид в HTML/CSS/Bootstrap, где непосредственно под изображением есть изображение и некоторый текст НО СТРОГО ДОЛЖЕН НАЧАТЬ ТЕКСТ НА ЛЕВОЙ ГРАНИЦЕ ИЗОБРАЖЕНИЯ В ОТНОШЕНИИ ДЛИНЫ ДЛИНЫТЕКСТ!

вот требуемый вид:

Проблема в том, что если я применю text-alignment:center; к элементам div столбцов начальной загрузки (яиспользуя сетки начальной загрузки здесь) картинка идет в центр div, но выравнивание текстов под картинкой также происходит в центре под картинкой, но, как я уже говорил ранее, я хотел выровнять текст по левому нижнему краю, независимо от того, какой родительский cssis!

Вот что я пробовал (я включаю только один столбец сетки начальной загрузки, поскольку другие также содержат аналогичную информацию):

<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;
}

После повторных попыток то же самое я получаю:

Вот моя скрипка:

https://jsfiddle.net/vrw7ph13/

Answer 1

Проблема в том, что в вашем css вы нацелены на прямых детей, когда вы пишете >, это берет прямых детей, но ваш .desc не является прямым потомком col-auto.

проверьте мою модифицированную версию jsfidle https://jsfiddle.net/752bkhj9/3/

---

Вы написали

.col-auto > .desc

, но у вас нет прямого дочернего .desc в вашем .col-auto, проверьте ваш html

И правило text-align наследуемо, оно наследует стили от родительского, вы думали, что перезаписываете это правило, используя col-auto > .desc, но, используя >, вы нацеливались на несуществующий элемент.

Answer 2

Да, проблема в том, что в вашем html нет .col-auto > .desc.Глядя на ваш HTML, у вас есть .col-auto > .card-d > .desc

Таким образом, вместо:

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

вы можете попробовать:

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

или если вы хотите сохранить родительский> дочернийотношения:

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