html - 如何将一个 div 与另一个 div 中的图像水平对齐

Question

我在用 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>

这是我的 CSS

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

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

CSS BUTTON

RIGHT ARROW

感谢您的任何回复。

Answer 1

由于您在父级上使用 display: table，如果您希望直接子级能够正常工作并使用vertical-align 属性就像表格一样。

向 .assetbuttonIcon 添加了 display: table-cell 并为该元素提供了一个填充以将文本与图标分开。

.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;
  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: table-cell;
  max-width: 10%;
  padding-left: .5em;
}

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