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，因此您希望直接子级为display: table-cell，如果您希望它们正常工作并将vertical-align属性用作表格会。

将display: table-cell添加到.assetbuttonIcon并为该元素添加了一个填充内容，以便将文本与图标分开。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你不需要做什么。只需从所有css部分删除所有vertical-align属性。添加vertical-align：middle .assetbuttonIcon img {} img类。检查下面的代码段，这里是livefiddle

.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;
 
    display: table-cell;
}
.assetbuttonIcon {

    display:inline-block;
    max-width:10%;
}
.assetbuttonIcon img{
  vertical-align:middle;
   padding-left: 10px;
}

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

如何在另一个div中水平对齐div与图像

2 个答案: