htmlcssalignmentvertical-alignment

Vertical alignment of left-to-right content within a DIV element

I am not a front-end developer and am trying to create a very simple page skeleton that currently looks like as follows:

Rendered page

The logo is the same height as the header div and everything to the right is plain text. I want to align the words SYNGERY technology partners to vertical middle. I also do not know what would happen if future content were taller than the header.

I have a feeling that using simple subsequent span elements is not the right way. Is there a better way to structure it? I would prefer not to create a whole image just for this.

I would also prefer to stay away from absolute positioning unless it is a recommended practice.

There is a 5px border around the header div for clarification, and I have simplified the HTML/CSS as much as possible.

<!DOCTYPE html>

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet" />
</head>
<body>

    <div id="DivMain">

        <div id="DivHeader" style="border: 5px solid red;">

            <a href="Index.html">
                <img src="Assets/Brand/Logo.png" style="width: 80px; height: 80px;" />
                &nbsp;
                <span class="Logo" style="height: 100px;">SYNERGY</span>
                &nbsp;
                <span>TECHNOLOGY PARTNERS</span>
            </a>

        </div>

        <div id="DivMenu"><a id="AnchorMenuIndex" href="Index.html">HOME</a></div>
        <div id="DivBody"><h1>HOME</h1></div>
        <div id="DivFooter"><a href="Contact.html">CONTACT</a></div>

    </div>

</body>
</html>

<style type="text/css">
    * { margin: 0px; padding: 0px; }
    body { height: 100%; max-height: 100vh; font-family: Arial, Helvetica, sans-serif; border-color: black; background-color: white; }
    a { color: #0E2841; text-decoration: none; }
    div { text-align: justify; }

    #DivHeader
    {
        height: 80px;
        color: white;
        background-color: #0E2841;
        vertical-align: middle; /* This is perhaps the problem? */
    }
    #DivHeader a { color: white; }

    #DivMain { background-color: white; }
    #DivMenu { }
    #DivBody { }
    #DivFooter { }

    .Logo { font-family: "Gugi", sans-serif; font-weight: 400; font-style: normal; font-size: 36px; }
</style>

I looked around and found all sorts of ways and did not find something that that I could understand. Any pointers would be appreciated.

Solution 

  • * {
  margin: 0px;
  padding: 0px;
}
body {
  height: 100%;
  max-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  border-color: black;
  background-color: white;
}
a {
  color: #0e2841;
  text-decoration: none;
}
div {
  text-align: justify;
}

#DivHeader {
  height: 80px;
  color: white;
  background-color: #0e2841;
}
#DivHeader a {
  color: white;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

#DivHeader a * {
  color: white;
  display: inline-block;
  vertical-align: middle;
}

#DivMain {
  background-color: white;
}
#DivMenu {
}
#DivBody {
}
#DivFooter {
}

.Logo {
  font-family: "Gugi", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 36px;
}
    <html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Gugi&display=swap" rel="stylesheet" />
</head>
<body>

    <div id="DivMain">

        <div id="DivHeader" style="border: 5px solid red;">

            <a href="Index.html">
                <img src="Assets/Brand/Logo.png" style="width: 80px; height: 80px;" />
                &nbsp;
                <span class="Logo">SYNERGY</span>
                &nbsp;
                <span>TECHNOLOGY PARTNERS</span>
            </a>

        </div>

        <div id="DivMenu"><a id="AnchorMenuIndex" href="Index.html">HOME</a></div>
        <div id="DivBody"><h1>HOME</h1></div>
        <div id="DivFooter"><a href="Contact.html">CONTACT</a></div>

    </div>

</body>
</html>

    To fix the issue using vanilla CSS, first you need convert the default display CSS attribute of the <a> element's children (*) to inline-block. Next, you set the vertical-align attribute to middle. Then you zero out both the padding and margin of the parent element (the <a> tag), so that when you set the width and height to be 100%, it will be exactly that (no extra pixels or unaccounted white space). Finally, remove the inline height style that you had on the .Logo element. Things need to fit inside of what you're trying to vertically align, otherwise it will shift up or down, unless you specify overflow attribute behavior. Display block or inline-block typically get you there most of the way there.