如何在 div 容器之外对齐我的图像？

Posted 2023-03-05

【中文标题】如何在 div 容器之外对齐我的图像？

【英文标题】：How to align my image half way outside of div container?

【发布时间】：2021-01-11 05:29:04

【问题描述】：

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

<p>button outside to right abit<p>need to create similar effect on leftside</p>of simley icon above!

我怎样才能让它工作？ 任何建议或想法都会对我很有帮助。谢谢美味

【参考方案1】：

步骤：1

只需在图像中添加 margin-left

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;" ></div><p></p>
<div style="height:50px;width:70px;background:rgba(0, 0, 0, .4);"><img src="http://wizzfree.com/pix/button6.png" ></div>

<p>button outside to right abit<p>need to create similar effect on leftside</p>

步骤：2

您可以将该 div 和图像放入一个母 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;" >
      <div align="left" style="height:50px;width:70px;background:rgba(0, 0, 0, .4);"></div>
</div>