CODEWITHSUNDEEP
htmlcss
JPV
JPV

Reputation: 1079

Align Header and logo

I am recently new to CSS and HTML and I have a problem while aligning my logo and Title in the header:

enter image description here

I have tried several solutions but I have not succeed. I would appreciate if you could give me a hint with it. Thanks.

HTML CODE: 

<!  DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title goes here</title>
  <meta name="description" content="Description of your site goes here">
  <meta name="keywords" content="keyword1, keyword2, keyword3">
  <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="page">
<div class="header" >
<h1>  <img src="images/img1.jpg" width="250" height="190" float="right" />  Some text here </h1>
</div>
</body>
</html>

My CSS CODE: 

body {
    font-family: sans-serif,Arial;
    font-size: 12px;
    color: #000000;
    margin: 0px;
    background-color:#d9d7d7;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li, form, input, textarea {
    padding: 0px;
    margin: 0px;
    color: black;
}
.page {
    width: 1000px;
    float: left;
    padding: 42px 0px 0px 0px;
    position: center;
}   
.header {
    position:absolute; 
    top:42px; 
    margin-left:-500px; 
    left:50%;
    width: 1000px;
    height: 200px;
    background-color: white;
    border-style: solid solid none solid;
    border-width: thick;    
}
.header h1{
    display: inline;
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}

Thanks

Upvotes: 0

Views: 187

Answers (2)

giordanolima
giordanolima

Reputation: 1218

At your HTML code:

<h1>  
    <img src="http://lorempixel.com/250/190/" width="250" height="190" />  
    <p>Some text here</p> <!-- Put your text into a <p> -->
</h1>

At your CSS:

.header h1{
    display: block;  /* display: block; */
    text-align: left;
    font-family: cursive;
    font-size: 45px;
    color: black;
}
/* And this */
.header img {
    display: block;
    float: left;
}
.header p {
    line-height: 190px; /* Here is the trick... line-height = image height */
}

Finddle: http://jsfiddle.net/4sfab9u0/

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

One solution is to use vertical-align: middle to img like:

body {
  font-family: sans-serif, Arial;
  font-size: 12px;
  color: #000000;
  margin: 0px;
  background-color: #d9d7d7;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
form,
input,
textarea {
  padding: 0px;
  margin: 0px;
  color: black;
}
.page {
  width: 1000px;
  float: left;
  padding: 42px 0px 0px 0px;
}
.header {
  position: absolute;
  top: 42px;
  margin-left: -500px;
  left: 50%;
  width: 1000px;
  background-color: white;
  border-style: solid solid none solid;
  border-width: thick;
}
.header h1 {
  display: inline;
  text-align: left;
  font-family: cursive;
  font-size: 45px;
  color: black;
}
h1 img {
  vertical-align: middle;
}
<div class="page">
  <div class="header">

    <h1>  <img src="images/img1.jpg" width="250" height="190"  />  Some text here </h1>

  </div>

Also float="right" isn't valid html attribute. Take a look here image MDN for valid image html attributes.

Upvotes: 3

Related Questions