如何使文本严格显示在与上图的左侧镗孔对齐的图像的底部 - 无论父对齐？

Question

我试图在HTML/CSS/Bootstrap中实现一个视图，其中有一个图像和图像下方的一些文字但严格的文字必须从图像的左侧边界开始，不论文本的长度如何！

这是必需的视图：

问题是如果我将text-alignment:center;应用于bootstrap列的div（我在这里使用bootstrap网格），图片将转到div的中心，但图片下面的文本对齐也位于图片的中央，但正如我之前所述我想将文本对齐到左下角，无论父css是什么！

这是我尝试的（我只包括一个引导网格的列，因为其他人也包含类似的信息）：

<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的直接孩子。

检查我的jsfiddle qazxsw poi的修改版本

---

你写

https://jsfiddle.net/752bkhj9/3/

但你的.col-auto中没有直接的子.desc，请查看你的html

并且.col-auto > .desc 规则是可继承的，它继承了父级的样式，你以为你用text-align覆盖了这个规则，但是使用col-auto > .desc你是以非现有元素为目标。

Answer 2

是的，问题是你的HTML中没有>。看看你的HTML，你有.col-auto > .desc

所以代替：

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