Html 垂直对齐两个不同的元素

我正在制作一个包含两个元素的div：一个图像和一个文本。图像占据

div

的前半部分（顶部），文本占据

div

的下半部分（底部）。 我希望图像适合

div

的大小，但不要拉伸，还希望对每个元素应用不同的悬停效果。我一直在努力，但我没有建立这种结构。这就是我到目前为止所做的：

。工作项{
位置：相对位置；
高度：300px；
宽度：350px；
}
.工作项图像{
位置：绝对位置；
排名：0；
}
.工作项图像img{
最大高度：150像素；
最大宽度：350px；
对象匹配：覆盖；
}
.工作项目案文{
位置：绝对位置；
垂直对齐：中间对齐；
最大高度：150像素；
最大宽度：350px；
}

---

将此css用于.work item图像

.work-item-image {
              float: right;
              width: 100%;
   }

---

只需使用

display:inline block

而不是像这样使用绝对位置：

。工作项{
位置：相对位置；
高度：300px；
宽度：350px；
}
.工作项图像{
显示：内联块；
}
.工作项图像img{
最大高度：150像素；
最大宽度：350px；
对象匹配：覆盖；
}
.工作项目案文{
显示：内联块；
最大高度：150像素；
最大宽度：350px；
}

---

不要固定图像的宽度。每个div的宽度必须相等。这段代码可能会对您有所帮助。使用Photoshop等工具调整图像大小

.work-item {
position:relative;
height:300px;
width:350px; or width: 100%; 
}
.work-item-image {
position:absolute;
top:0;
}
.work-item-image img {
max-height: 150px;
object-fit: cover;
}
.work-item-text {
 position:absolute;
 vertical-align:middle;
 max-height: 150px;
 width: 350px; or width: 100%;
}

---

试试这个。试着找到其他的解决方案，然后绝对。 CSS:

HTML:

不清楚您到底在问什么。什么应该决定“工作项”div的宽度？文本还是图像？身高是多少？所有的“工作项”div是否都具有相同的宽度/高度？我想要的是两个元素以相同的尺寸垂直对齐。因此，它们都具有相同的宽度，但高度将是整个div维度的一半。如果主div的heigh值为350px，这意味着我希望图像和文本的每个值都为175px。工作项是主div，其中包含工作项img和work-item-text。这几乎可以完成工作，但我希望图像和文本垂直对齐，而不是水平对齐。但是谢谢：）你可以通过给两个元素相同的

行高来实现这一点。我试过了，但是文本仍然停留在图像的顶部，我希望它位于图像的另一个div中，与图像的尺寸相同！谢谢它起作用了。文本在图像下面。工作很好。如果它对你不起作用，请用小提琴给我们看。它起作用了！谢谢只有一个问题：我的文本不适合工作项文本div，它只保留一行，溢出到网页的其余部分，我如何修复它？仅使用换行符管理fin解决方案：break word；但这只在我们有更大尺寸的单词时有效，而不是在文本上。谢谢我不确定我是否理解。在我的浏览器上，文本有多行，大小为.work item{width:350；}（我用一些loremipsum进行了尝试）。您可以尝试为.work item文本添加一个“width”属性，然后单词换行符也可以用于较小的单词。
.work-item {
    height:300px;
    width:350px;
}

.work-item-image {
    top:0;
}

.work-item-image img {
    max-height: 150px;
    max-width: 350px;
    object-fit: cover;
}

.work-item-text {
    margin: 0 auto;
    vertical-align:middle;
    max-height: 150px;
    max-width: 350px;

} 
h1 {
    text-align: center;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

<div class="work-item">
        <a href="#">
            <div class="work-item-image"> 
                <img src="..."/>
            </div>
            <div class="work-item-text">
                <h1>Hello Worl</h1>
            </div>
        </a>
</div>