How to get an image and H1 on the same line

Question

I have a logo (figure) for a website that I need to put on the same line as the h1 heading. Does anyone have suggestions? Here is something I recently tried:

figure {
  float: left;
  padding-left: 2px;
}

h1 {
  text-align: center;
  border: 3px solid: #FFA500;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #828282;
}
header {
  text-align: center;
  letter-spacing: 1px;
  height: 8em;
  padding: 2em 10%;
}




            <title>Kumquats</title>
       <link rel="stylesheet" href="css/styles.css">
  </head>

  <body>
  <div id="wrapper">
     <header>
       <figure>
         <a href="index.html">
               <img src="img/kumquatlogo.gif"                 alt="kumquat                   logo"                                  width="75"               height="75">
       </figure>
         </a>
        <h1>Kumquat Central</h1>

I want a logo image to be at the top of a webpage, next to an h1 element of text. The figure and the h1 are contained inside of a header, that is why I have header code there.

score 2 · Accepted Answer · answered Apr 27 '16 at 22:55

You also can try the following:

HTML:

<header>
    <a href="index.html">
        <img src="http://placeholder.cn/128/aaa" alt="kumquat logo" class="figure">
    </a>
    <h1>Kumquat Central</h1>
</header>

Then your CSS stylesheet. Also fixed your h1 border parameter that had errors.

h1 {
    display: inline;
    text-align: center;
    border: 3px solid #FFA500;
    border-radius: 15px;
    box-shadow: 5px 5px 5px #828282;
}

header {
    text-align: center;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
}

.figure {
    vertical-align:middle;
}

score 1 · Answer 2 · edited May 23 '17 at 12:31

1

Since you did not share your html, here is a good way to do it https://jsfiddle.net/u97rggyy/5/

Actually this question should be marked as a duplicate of Vertically align text next to an image?

HTML

<!-- Case 1) text height is bigger than image height -->
<div>

  <img class="img-valign" src="http://www.placehold.it/30x30" alt="" />
  <span class="text1">some text1</span>
  <img class="img-valign" src="http://www.placehold.it/20x20" alt="" />
  <span class="text1">some text1</span>

</div>

<br/><br/><br/>

<!-- Case 2) image height is bigger than text height -->
<div>

  <img class="img-valign" src="http://www.placehold.it/50x50" alt="" />
  <span class="text2">some text2</span>
  <img class="img-valign" src="http://www.placehold.it/70x70" alt="" />
  <span class="text2">some text2</span>

</div>

CSS

.img-valign {
  vertical-align: middle;
  margin-bottom: 0.75em;
}

.text1 {
  font-size: 44px;
}

.text2 {
  font-size: 24px;
}

edited May 23 '17 at 12:31

Community

1
1

answered Apr 27 '16 at 22:11

Adam Buchanan Smith

9,422
5
19
39

Thank you I will take a look. – Akuden Apr 27 '16 at 22:18
And so I can replace the src=placehold with my img and you think it ought to work? Forgive me I am oh so new and under so much pressure. – Akuden Apr 27 '16 at 22:31
Placehold.it is just a place holder image, use `src="img/kumquatlogo.gif"` for your image – Adam Buchanan Smith Apr 27 '16 at 22:44
I GOT IT YESSS~! Thank you very much sir, now . . . I need to move it up just a couple pixels up. The adventure continues!! – Akuden Apr 27 '16 at 22:52

How to get an image and H1 on the same line

2 Answers2