0

编辑：这可能更有意义，请检查此图像。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>
4

4 回答 4

0

用这个

<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>

于 2012-04-25T19:35:28.607 回答
0

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

于 2012-04-25T19:48:00.313 回答
0

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 中退出的原因是它没有被清除。这应该可以解决问题。

于 2012-04-25T19:54:30.490 回答
0 

#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>

于 2020-03-30T03:21:37.870 回答