Html 如何将一个div与另一个div内的图像水平对齐

我在css中创建按钮时遇到了很多问题。以下是它的工作原理：

该按钮需要有两个部分，一个用于调用操作文本，另一个带有向右箭头。这个按钮需要是动态的，因为它将在内容管理系统中使用，所以它需要扩展它的高度

右箭头需要与中间文字垂直对齐，但我似乎无法实现。

这是我的HTML：

    <div class="assetbuttonWrap">
  <div class="assetbuttonText"><a href="#" class="assetbuttonText">Click here to download the whitepaper</a></div><div class="assetbuttonIcon"><img src="images/arrow_right.png" width="8" height="12" alt="arrow"></div></div>

我还附上了一张图片，看看它应该是什么样子

---

感谢您的回复。

因为您在父级上使用了

display:table

，如果希望直接子级正常工作并像表一样使用

vertical align

属性，您希望直接子级为

display:table cell

将

display:table cell

添加到

.assetbuttonIcon

中，并为该元素提供了一个填充，以将文本与图标分隔开

.assetbuttonWrap{
边界：无；
填充：12px 14px 12px 14px；
边缘顶部：12px；
身高：100%；
背景色：#dddddd；
显示：表格；
}
.assetbuttonWrap：悬停{
背景色：#b6b6；
光标：指针；
}
a、 assetbuttonText:链接{
文字装饰：无；
颜色：#666；
}
.assetbuttonText{
颜色：#7373；
字体大小：16px；
字体风格：普通；
字号：700；
线高：19px；
最大宽度：93%；
文本对齐：左对齐；
文字装饰：无；
垂直对齐：中间对齐；
显示：表格单元格；
}
.资产按钮{
垂直对齐：中间对齐；
显示：表格单元格；
最大宽度：10%；
左侧填充：.5em；
}

---

你不需要做什么。只需从所有css部分中删除所有垂直对齐属性。添加垂直对齐：middle.assetbuttonIcon img{}img类。检查下面的代码片段，这里是一个

.assetbuttonWrap{
边界：无；
填充：12px 14px 12px 14px；
边缘顶部：12px；
身高：100%；
背景色：#dddddd；
显示：表格；
}
.assetbuttonWrap：悬停{
背景色：#b6b6；
光标：指针；
}
a、 assetbuttonText:链接{
文字装饰：无；
颜色：#666；
}
.assetbuttonText{
颜色：#7373；
字体大小：16px；
字体风格：普通；
字号：700；
线高：19px；
最大宽度：93%；
文本对齐：左对齐；
文字装饰：无；
显示：表格单元格；
}
.资产按钮{
显示：内联块；
最大宽度：10%；
}
.assetbuttonIcon img{
垂直对齐：中间对齐；
左侧填充：10px；
}

您现在拥有的有什么问题吗？看起来和我一样。我在图标分区中添加了边距和显示：表格单元格。。。这个更好吗？没什么变化这实际上更好，效果很好！非常感谢。好酷，我不确定，因为变化不大。继续并提交作为答复。如果这解决了问题，您可以单击答案旁的复选框以接受它作为解决方案。

.assetbuttonWrap {
    border: none;
    padding: 12px 14px 12px 14px;
    margin-top:12px;
    height:100%;
    background-color: #dddddd;
    display:table;
}
.assetbuttonWrap:hover {
    background-color: #B6B6B6;
    cursor:pointer;
}
a.assetbuttonText:link {
    text-decoration:none;
    color: #666;
}

.assetbuttonText {
    color: #737373;
    display: inline-block;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 19px;
    max-width: 93%;
    text-align: left;
    text-decoration: none;
    vertical-align: middle;
    display: table-cell;
}
.assetbuttonIcon {
    vertical-align: middle;
    display:inline-block;
    max-width:10%;
}