如何在div容器之外将图像对齐一半？

Question

是否可以将我的图像放置在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, 0, 0, .4);"><img src="http://wizzfree.com/pix/smiley2.png" width="32"></div><p></p>
<div style="height:50px;width:70px;background:rgba(0, 0, 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

Answer 1

步骤：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, 0, 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, 0, 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, 0, 0, .4);"></div>
</div>