如何解决如何在div容器之外将图像对齐一半?
是否可以将我的图像放置在div边缘的一半之外? (类似于示例代码中的右侧)。只需使用html align函数就可以完成?
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: white;
font-size: 14px;
}
<div align="left" style="height:50px;width:70px;background:rgba(0,.4);"><img src="http://wizzfree.com/pix/smiley2.png" width="32"></div><p></p>
<div style="height:50px;width:70px;background:rgba(0,.4);"><img src="http://wizzfree.com/pix/button6.png" width="90"></div>
<p>button outside to right abit<p>need to create similar effect on leftside</p>of simley icon above!
我如何才能使它正常工作? 任何建议或想法对我都会非常有帮助。 Thx yummi
解决方法
步骤:1
只需在图像上添加左边距
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: white;
font-size: 14px;
}
<div align="left" style="height:50px;width:70px;background:rgba(0,.4);"><img src="http://wizzfree.com/pix/smiley2.png" style=" margin-left: -38px;" width="38"></div><p></p>
<div style="height:50px;width:70px;background:rgba(0,.4);"><img src="http://wizzfree.com/pix/button6.png" width="90"></div>
<p>button outside to right abit<p>need to create similar effect on leftside</p>
步骤:2
您可以将该div和image放入主div,并在该主div中添加display flex
body {
background-color: #6B6B6B;
margin: 50px;
font-family: Arial;
color: white;
font-size: 14px;
}
<div style="display: flex">
<img src="http://wizzfree.com/pix/smiley2.png" style=" margin-left: -38px;" width="38">
<div align="left" style="height:50px;width:70px;background:rgba(0,.4);"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。