Align an image and text in same line

Question

I want to align an image and h1 in the same line. I have attached my source code and it doesn't work. can someone tell what's wrong with it.

<head>
    .header img{
        float: left;
        width: 2px;
        height: 3px;
        background: #555;
    }
    .header h1{
        position: relative;
        top: 18px;
        left: 10px;
    }

    <title> home page </title>
</head>
<body>

    <div class="header">
        <img src="greenlock.jpg" alt="logo" />
        <h1> UNIVERCITY OF GREENLOCK <h1>        
    </div>

Answer 1

use display : inline-block

 .header img{ display:inline-block; width:10px; height:3px; background:#555 } .header h1{ display:inline-block; position: relative; }

 <div class="header"> <img src="greenlock.jpg" alt="logo" /> <h1> UNIVERCITY OF GREENLOCK <h1> </div>

you can also use float:left to image and float:right to the header

 .header img{ float:left; width:10px; height:3px; background:#555 } .header h1{ flaot:right; position: relative; }

 <div class="header"> <img src="greenlock.jpg" alt="logo" /> <h1> UNIVERCITY OF GREENLOCK <h1> </div>

Answer 2

Please try this code:

 .header img{
  width:2px;
  height:3px;
  background:#555;
  vertical-align: middle;

}
.header h1{
  display: inline-block;
  vertical-align: middle;
}

Answer 3

In a situation like this, where the image is essentially part of the heading , I would have the image which sits beside the <h1> , not as an <img> at all but as a background style rule applied to the <h1> :

 h1 { margin: 18px 0 0 10px; padding-left: 30px; font-size: 16px; line-height: 24px; text-transform: uppercase; background: url('http://placehold.it/24x24') no-repeat left top rgb(255,255,255); }

 <header> <h1>University of Greenlock</h1> </header>

Align an image and text in same line

Question

3 answers

solution1
0 2016-07-06 08:24:34

solution2
0 2016-07-06 08:27:21

solution3
0 2016-07-06 08:43:15

Align an image and text in same line

Question

3 answers

solution1 0 2016-07-06 08:24:34

solution2 0 2016-07-06 08:27:21

solution3 0 2016-07-06 08:43:15

solution1
0 2016-07-06 08:24:34

solution2
0 2016-07-06 08:27:21

solution3
0 2016-07-06 08:43:15