如何在另一个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%;
}
我重视的图像为好,看看它的外观。
谢谢你的任何答复。
答
由于您在家长上使用的是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>
答
没有什么,你需要做的。只需从所有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>
出了什么问题,你现在有什么?看起来和我一致。我添加了一个边缘和'display:table-cell'到图标div ...这更好吗?不会改变很多https://jsfiddle.net/tfcvenfq/1/ –
这实际上更好,效果很棒!谢谢! – user3772368
好酷,不知道,因为它没有太大的变化。提前作为答案提交。如果解决了这个问题,您可以点击答案中的支票将其作为解决方案。 –