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

我在创建css中的按钮时遇到了很多麻烦。以下是它需要如何工作：如何在另一个div中水平对齐div与图像

该按钮需要有两个部分，一个用于号召性用语文本，另一个用向右箭头。这个按钮需要是动态的，因为它将用于内容管理系统，因此需要扩展它的高度。

右箭头需要与中间的文字垂直排列，但我似乎无法实现此目的。

这里是我的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

谢谢你的任何答复。

来源

2017-04-07 user3772368

出了什么问题，你现在有什么？看起来和我一致。我添加了一个边缘和'display：table-cell'到图标div ...这更好吗？不会改变很多https://jsfiddle.net/tfcvenfq/1/ –

这实际上更好，效果很棒！谢谢！ – user3772368

好酷，不知道，因为它没有太大的变化。提前作为答案提交。如果解决了这个问题，您可以点击答案中的支票将其作为解决方案。 –

由于您在家长上使用的是display: table，如果您希望他们能够很好地工作并将vertical-align属性用作表格，那么您希望直接子女成为display: table-cell。

添加了display: table-cell到.assetbuttonIcon并给了该元素一个填充以将文本从图标中分离出来。

.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="https://i.stack.imgur.com/Wxy1A.png" width="8" height="12" alt="arrow"></div> 
 
</div>

来源

2017-04-07 18:33:10

没有什么，你需要做的。只需从所有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>

来源

2017-04-07 18:49:59

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

回答

相关问题