Logo image and H1 heading on the same line
HtmlCssPositionInlineHtml Problem Overview
I want to create my first web page but I encountered a problem.
I have the following code:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line. Thanks!
Html Solutions
Solution 1 - Html
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;
}
Solution 2 - Html
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.
Solution 3 - Html
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>
Solution 4 - Html
Try this:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Solution 5 - Html
Just stick the img tag inside the h1 tag as part of the content.
Solution 6 - Html
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.
Solution 7 - Html
you can do this by using just one line code..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
Solution 8 - Html
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>
Solution 9 - Html
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:
Solution 10 - Html
in your css file do img { float: left; } and h1 {float: left; }
Solution 11 - Html
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.
}
Solution 12 - Html
<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>
Solution 13 - Html
Steps:
- Surround both the elements with a container div.
- Add
overflow:autoto container div. - Add
float:leftto the first element. - Add
position:relative; top: 0.2em; left: 24emto the second element (Top and left values can vary according to you).