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中，您一直以直接子对象为目标，当您编写foo.py时，它直接带孩子，而您的>不是col-auto的直接子对象。

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

您已写

.desc

但是您的.col-auto中没有直接子项.desc，请检查您的html

.col-auto > .desc规则是可继承的，它从父级继承样式，您认为您正在使用text-align覆盖此规则，但是使用col-auto > .desc则将目标定位为不存在的元素。 / p>

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

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

2 个答案: