如何使文本嚴格顯示在與上述圖像的左側鑽孔對齊的圖像底部 - 無論父對齊如何？

Question

我正在嘗試在HTML/CSS/Bootstrap中實現一個視圖，其中在圖像下方有一個圖像和一些文本，但嚴格地說，無論文本的長度如何，文本都必須從圖像的左側邊界開始！

這是所需的視圖：

問題是如果我應用text-alignment:center; 到引導列的 div（我在這里使用引導網格），圖片位於 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 的直接子級。

檢查我修改過的 jsfidle 版本https://jsfiddle.net/752bkhj9/3/

---

你寫

.col-auto > .desc

但是您的 .col-auto 中沒有直接子 .desc，請檢查您的 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 */
}