Css 引导4列中的全高div

我想让我所有的

.element

处于同一高度，如果图像太小而无法达到全尺寸，则将图像垂直居中对齐。 我试了很多方法，但都找不到解决办法

.element{
边框：10px实心#e6；
边缘底部：20px；
}
.元素.内部{
填充：15px；
}
.元素.内部p{
边缘底部：5px；
文本对齐：居中；
}
a.要素a{
背景色：#424753；
颜色：#fff；
显示：块；
高度：30px；
垫面：3件；
文本对齐：居中；
}

一些文本

链接
一些文本

链接
一些文本

链接
一些文本

链接

您可以在

元素

、

内部

和

列

上添加

显示：flex

、

伸缩方向：列

和

flex:1

。要使

img

居中，可以使用

margin top

和

margin bottom

自动

.col-3，
要素
.内部{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.元素{
边框：10px实心#e6；
边缘底部：20px；
}
.元素.内部{
填充：15px；
}
.元素.内部p{
边缘底部：5px；
文本对齐：居中；
}
a.要素a{
背景色：#424753；
颜色：#fff；
显示：块；
高度：30px；
垫面：3件；
文本对齐：居中；
}
.元素img{
页边顶部：自动；
页边距底部：自动；
}

一些文本

链接
一些文本

链接
一些文本

链接
一些文本

链接

您可以在

元素

、

内部

和

列

上添加

显示：flex

、

伸缩方向：列

和

flex:1

。要使

img

居中，可以使用

margin top

和

margin bottom

自动

.col-3，
要素
.内部{
显示器：flex；
弯曲方向：立柱；
弹性：1；
}
.元素{
边框：10px实心#e6；
边缘底部：20px；
}
.元素.内部{
填充：15px；
}
.元素.内部p{
边缘底部：5px；
文本对齐：居中；
}
a.要素a{
背景色：#424753；
颜色：#fff；
显示：块；
高度：30px；
垫面：3件；
文本对齐：居中；
}
.元素img{
页边顶部：自动；
页边距底部：自动；
}

一些文本

链接
一些文本

链接
一些文本

链接
一些文本

链接

您想要这样吗，只是添加了位置样式。但有了它，您还必须编写媒体查询样式

.element{
边框：10px实心#e6；
边缘底部：20px；
身高：225px；
位置：相对位置；
}
.元素.内部{
填充：15px；
}
.元素.内部p{
边缘底部：5px；
文本对齐：居中；
}
a.要素a{
背景色：#424753；
颜色：#fff；
显示：块；
高度：30px；
垫面：3件；
文本对齐：居中；
位置：绝对位置；
左：0；
右：0；
底部：0；
}

一些文本

链接
一些文本

链接
一些文本

链接
一些文本

链接

您想要这样吗，只是添加了位置样式。但有了它，您还必须编写媒体查询样式

.element{
边框：10px实心#e6；
边缘底部：20px；
身高：225px；
位置：相对位置；
}
.元素.内部{
填充：15px；
}
.元素.内部p{
边缘底部：5px；
文本对齐：居中；
}
a.要素a{
背景色：#424753；
颜色：#fff；
显示：块；
高度：30px；
垫面：3件；
文本对齐：居中；
位置：绝对位置；
左：0；
右：0；
底部：0；
}

一些文本

链接
一些文本

链接
一些文本

链接
一些文本

链接

您可以使用新的引导4并减少所有额外的CSS

一些文本

一些文本

一些文本

一些文本

---

您可以使用新的引导4并减少所有额外的CSS

一些文本

一些文本

一些文本

    <div class="row">
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>

        </div>
        <div class="col-3 align-items-center">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
    </div>