How to align a logo and h1 horizontally in a div

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>

a table should **never** be used for layouting! To position elements, you have other mechanisms like flexbox, floating or positioning. — andreas, Mar 06 '17 at 06:19
Can you please add an image demonstrating the expected behavior? Also, what should it look like when resized to a small screen? — Kobi, Mar 06 '17 at 06:25

score 1 · Accepted Answer · answered Mar 06 '17 at 06:22

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.

answered Mar 06 '17 at 06:22

A. L

11,695
23
85
163

Like I commented above: it's bad practice to use tables for layouting! To position elements, you have other mechanisms like flexbox, positioning or floating. – andreas Mar 06 '17 at 06:23
@andreas Why? Tables are great positioners, and sometimes it's your only option (emails). Flexboxes also do a good job, but require much more tweaking. Floats are pretty terrible because they can mess up how you think the results will come out, especially `float: right`. The first ones end up on the right most when you would think they would end up on the left most of the right side. And positioning tends to be very hacky and will screw up easily when you change resolutions – A. L Mar 06 '17 at 06:24

andreas · Answer 2 · 2017-03-06T06:36:27.333

0

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>

edited Mar 06 '17 at 06:36

answered Mar 06 '17 at 06:17

andreas

16,357
12
72
76

"text should be look like at center of screen" - this suggests that the text should be at the center, as if the logo weren't there. Also, this causes the logo to resize, which is usually undesirable. – Kobi Mar 06 '17 at 06:19

Ullas · Answer 3 · 2017-03-06T07:03:17.967

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>

score 0 · Answer 4 · edited May 23 '17 at 12:17

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.

How to align a logo and h1 horizontally in a div

4 Answers4