发表新帖
发表新帖

Logo image and H1 heading on the same line

前端 未结
关注
13 2040
佛祖请我去吃肉
佛祖请我去吃肉 2020-12-07 19:45

I want to create my first web page but I encountered a problem.

I have the following code:

\"logo\"
相关标签:
13条回答
  • 心在旅途
    2020-12-07 20:39

    As example (DEMO):

    HTML:

    <div class="header">
  <img src="img/logo.png" alt="logo" />
  <h1>My website name</h1>
</div>

    CSS:

    .header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

    DEMO

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-07 20:39

    you can do this by using just one line code..

    <h1><img src="img/logo.png" alt="logo"/>My website name</h1>
    0 讨论(0)
  • 花落未央
    2020-12-07 20:42

    in your css file do img { float: left; } and h1 {float: left; }

    0 讨论(0)
  • 醉话见心
    2020-12-07 20:44 
    <head>
<style>
header{
    color: #f4f4f4;
    background-image: url("header-background.jpeg");    
}

header img{
    float: left;
    display: inline-block;
}

header h1{
    font-size: 40px; 
    color: #f4f4f4;
    display: inline-block;
    position: relative;
    padding: 20px 20px 0 0;
    display: inline-block;
}
</style></head>


<header>
<a href="index.html">
    <img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
    <a href="index.html">
    <h1><span> Technocrat</span> Blog</h1></a>
</div></header>
    0 讨论(0)
  • 独厮守ぢ
    2020-12-07 20:45

    Just stick the img tag inside the h1 tag as part of the content.

    0 讨论(0)
  • 终归单人心
    2020-12-07 20:46

    Try this:

    <img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
    0 讨论(0)
 看不清?
提交回复
热议问题