Search code examples
htmlcssasp.netpositionalignment

How to align a logo and h1 horizontally in a div

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

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