How to align a logo and h1 horizontally in a div - html

Question

I wants to align a logo at left end of a div and a text at center of that div(text should be look like at center of screen). The width of div is fit to screen. Both logo and text should be in same line. How is it make possible?I have start like below.But shows two elements as line by line.
<div >
<img id="imglogo" alt="" src="images/ logo.JPG" style="width: 300px;height:75px" />
<h1 align="center" id="H1">Project Name</h1>
</div>

Answer 1

Personally, I prefer table as it places things quite nicely and is reliable. See below:
<table border=1 style="table-layout: fixed; width:100%">
<tr>
<td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
<td style="text-align: center">Centered Text</td>
<td></td>
</tr>
</table>
And of course you can customise to however you wish.

Answer 2

You can do it with flexbox. The Heading will be centered in the space next to the image.
.wrapper {
display: flex;
}
.wrapper>div, h1 {
flex: 1;
}
h1 {
text-align: center;
}
<div class="wrapper">
<div><img src="https://placehold.it/300x75" /></div>
<h1>Project Name</h1>
</div>

Answer 3

One approach is to use absolute in relative positions:
h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}
h1 {
text-align: center;
position: relative;
height: 50px;
line-height: 50px;
margin-bottom: 4px;
}
#imglogo {
height: 50px;
position: absolute;
left: 0;
}
<div>
<h1 id="H1">
<img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
</h1>
Some more text
</div>
I think this achieves the effect you're after. Some notes:
We need to set the line height and height explicitly for the <h1>, so it will be vertically aligned with the logo. This will not work well if the title wraps lines.
On a small screen, the logo and the title overlap. You can define another rule for smaller displays.

Answer 4

You can use bootstrap columns.
img {
max-width: 300px;
float: left;
}
h1 {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-5">
<img class="img-responsive" src="https://placehold.it/300x75" />
</div>
<div class="col-xs-7">
<h1>Project Name</h1>
</div>
</div>