CODEWITHSUNDEEP
css
Akuden
Akuden

Reputation: 43

How to get an image and H1 on the same line

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.

Upvotes: 1

Views: 5503

Answers (2)

Jos&#233; Augustinho
Jos&#233; Augustinho

Reputation: 110

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;
}

Upvotes: 2

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

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;
}

Upvotes: 1

Related Questions