对齐 div 标签中的 img 左对齐？答案

【问题标题】：Aligning an img left in a div tag?对齐 div 标签中的 img 左对齐？
【发布时间】：2012-04-25 19:29:14
【问题描述】：

编辑：这可能更有意义，请检查此图像。 http://puu.sh/rt8M 图像只是通过填充。我希望标题 div 垂直扩展以容纳图像。在保持文本居中的同时，图像的中心应该与文本所在的线相交。

我想将一个 img 对齐到左侧（然后在右侧的文本之后对齐另一个）。我尝试了各种属性，但似乎没有一个做得对。有人可以帮忙吗？

为了澄清，我希望图像靠在屏幕或浏览器窗口的左侧。 div 从屏幕的左侧延伸到右侧，正如您所期望的标题/标题 div。

Float;left 似乎使 img 从 div 标签中退出。我应该提到有一个 text-align:center;标签上的属性。但是删除后它并不能解决问题，所以我不确定是不是这样。

HTML

<div id="header">
    <div id="title">
    <h1>
    <img class="logo" src="images/logo.png" alt="" width="86" height="98" />
    <a href="index.html">Page Header Title</a>
    </h1>
    </div>
</div>

【问题讨论】：

图片应该在左边，但是文字应该在哪里呢？向右？
可能是我误解了您的问题，但我认为您希望您的徽标位于浏览器的最左侧，所以您需要使用 -ve 值设置左边距，如下所示：jsfiddle.net/BvCGh

标签： html css

【解决方案1】：

我为您创建了一个小 dabblet 代码示例。我想这就是你想要做的？ http://dabblet.com/gist/2492793

【讨论】：

【解决方案2】：

CSS：

.logo{
     float:left;
     width: 86px;
     height:98px;
     display:block;    
}

.img2{
    float:right;
    display:block;
}

.clear{
    clear:both;
}

HTML：

<div id="header">
    <div id="title">
        <h1>
            <img class="logo" src="images/logo.png" alt="" />
            <a href="index.html">Page Header Title</a>
            <img class="img2" src="images/img2.png" alt="" />
            <div class="clear"></div>
        </h1>
    </div>
</div>

徽标从 div 中退出的原因是它没有被清除。这应该可以解决问题。

【讨论】：

【解决方案3】：

使用这个

<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
<a href="index.html">Page Header Title</a>
</h1>
</div>

【讨论】：

【解决方案4】：

#logo{
  display: flex;
  justify-content: space-evenly;
}

<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>

【讨论】：