[ANSWERED] html – Vertical align image with text with same size

Question 1

For put the img and the h2 to the same line – give to both display: inline-block

To align the text to the center of the image give to it text-align: super.

Below is the result:

/* CHANGES HERE */

header img {
  display: inline-block;
}
header h2 {
  display: inline-block;
  vertical-align: super;
}

/* END CHANGES */

body {
  font-family:sans-serif;
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
a {
  color: #3273dc;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer {
  padding: 25px;
  text-align: center;
}

<header>
   <img src="data:image/png;base64,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">
    <h2>
     
      Spiral
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=./about.html>About</a>
    </nav>
  </header>

  <content>
    <h1>Hello</h1>
    <p>Some content</p>
  </content>

Hope it is what you was looking for

Question 2

I want to (vertical) align an image with text and to have the same size.

Moreover :

don’t want to change the actual img css rules (but can add header img rules for instance)
don’t want to add div or class in html.

I tested different things vertical-align:middle, diplay: inline but don’t manage to achieve what I want.

Here is the code:

<html lang="en">
<head>
  <style>
body {
  font-family:sans-serif;
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
   <img src="data:image/png;base64,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">
    <h2>
     
      Spiral
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=./about.html>About</a>
    </nav>
  </header>

  <content>
    <h1>Hello</h1>
    <p>Some content</p>
  </content>

</body>

</html>

Thanks

Bollate

[ANSWERED] html – Vertical align image with text with same size

By

Solution 1 :

Problem :

Comments

Comment posted by BDR

By

Related Post

[ANSWERED] python – Extract text from a class in HTML using CSS language

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate