CODEWITHSUNDEEP
htmlcss
Alb
Alb

Reputation: 221

Keep image beside h1, both centered regardless of screen-size

Looking for a solution to keep user's profile pic beside h1, and keep them both centered with equal margins on both sides regardless of screen size. The h1 is centered via text-align, but I cannot figure out how to keep the img hugged beside that h1. At the moment, img is floated left, and when I comment out that float: left, the img centers and the h1 disappears. Here is the code for the div holding both the img and the h1, and then the img and h1 respectively. 

.biohead {
    width: 100%;
    position: fixed;
    text-align: center;
    display: block;
    padding-bottom: 1%;
    color: dimgray;
    font-size: 2.5em;
    box-shadow: 0 0 15px rgba(0, 0, 0, .2);
}
.biohead img {
  height: 50px;
  border-radius: 39px;
  width: 50px;
  margin-top: 5px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  /*margin-left: 15%;*/
  /*margin-right: 11px;*/
}
.biohead h1 {
/*    float: left;
*/    margin: 0 auto;
    margin-top: 10px; 
}

and the html :

  <div class="biohead">
     <img src="images/fisherman.png" alt="Raul">
     <h1>Raul Pescadero</h1> 
  </div> <!--biohead-->

Upvotes: 0

Views: 372

Answers (1)

misterManSam
misterManSam

Reputation: 24712

Make the h1 and img display: inline-block and remove the floats. They will both be centered by the existing text-align: center on the div.

Also, set them both as vertical-align: middle, as the default baseline value may cause unexpected behaviour with additional elements.

At the moment, the wrapping div should have an appropriate min-width so it does not get too small and cause the line to be broken.

Working Example

In this example I have removed the default margin from the body as well as the padding-bottom which is not needed.

body {
margin: 0;  
}

.biohead {
  width: 100%;
  position: fixed;
  text-align: center;
  display: block;
  color: dimgray;
  font-size: 2.5em;
  box-shadow: 0 0 15px rgba(0, 0, 0, .2);
  min-width: 600px;
}
.biohead img {
  height: 50px;
  border-radius: 39px;
  width: 50px;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}
.biohead h1 {
  display: inline-block;
  vertical-align: middle;
}
<div class="biohead">
  <img src="http://www.placehold.it/50" alt="Raul">
  <h1>Raul Pescadero</h1> 
</div>
<!--biohead-->

Upvotes: 2

Related Questions