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

Question

我正在尝试在 HTML/CSS/Bootstrap 中实现一个视图，其中有一张图片和紧挨着图片下方的一些文本 但严格来说，文本必须从图片的左侧边框开始无论文本的长度如何！

这是所需的视图：

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

这是我尝试过的方法（我只包含 bootstrap 网格中的一列，因为其他网格也包含类似信息）：

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

重复尝试后我得到的是：

这是我的 Fiddle:

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

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

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?

html

css

twitter-bootstrap

bootstrap-grid