Logo image and H1 heading on the same line

小开

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

小开

Try this:

<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>

小开

Try this:

Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.

小开

If your image is part of the logo why not do this:

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

Use CSS to style it better.

And it is also best practice to make your logo a hyperlink that take the user back to the home page.

So you could do:

<h1 id="logo"><a href="/"><img src="img/logo.png" alt="logo" /> My website name</a></h1>

小开

最佳答案

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

小开

You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.

Fiddle

小开

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

小开

Check this.

 .header{width:100%;
}


.header img{ width: 20%; //or whatever width you like to have


}


.header h1{


display:inline; //It will take rest of space which left by logo.
}

小开

I'd use bootstrap and set the html as:

<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>

小开

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

小开

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

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

小开

This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.

whois.css

.header-img {
height: 9%;
width: 15%;
}


header {
background: dodgerblue;


}


header h1 {
display: inline;
}

whois.html

<!DOCTYPE html>
<head>
<title> Javapedia.net WHOIS Lookup </title>
<link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
<header>
<img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
<h1>WHOIS Lookup</h1>
</header>
</body>

output:

小开

Steps:

Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).