0

I am trying to center the name in the head, top, and bottom of the logo name and id on my site. I have tried to use margin top, and it worked somewhat, but it is not exactly what I am looking for.

Desired output

Additionally, I am trying to make the logo name an href to link to the home/first page.

Code snippet:

body {
    background: #ebe7e7;
}

@font-face {
    font-family: liant;
    src: url(liant_regular-webfont.woff);

}
#lineup {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 0px;
}

#head {
    background-color: #cccccc;
    color: rgb(141, 68, 40);    
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0px; right: 0px; top: 5px;
}

#logotxt {
    text-align: center;
    font-family: liant;
    font-size: 40px;
    font-weight: 800;
   
}

#linedown {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viveka Yoga</title>
    <link rel="stylesheet" href="yoga.css">
</head>
<body>
    <div id ="lineup"></div>
    <div id="head">
        <p id="logotxt">Viveka Yoga</p>
    </div>
    <div id="linedown"></div>
    <script src="yoga.js"></script>
</body>
</html>
Anna Nevison
  • 2,709
  • 6
  • 21
manin
  • 85
  • 7

1 Answers1

0

Make use of flexbox.

See styles for #head

body {
    background: #ebe7e7;
}

@font-face {
    font-family: liant;
    src: url(liant_regular-webfont.woff);

}
#lineup {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 0px;
}

#head {
    background-color: #cccccc;  
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0px; right: 0px; top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logotxt {
    text-align: center;
    font-family: liant;
    font-size: 40px;
    font-weight: 800;
    text-decoration: none;
    color: rgb(141, 68, 40);  
}

#linedown {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viveka Yoga</title>
    <link rel="stylesheet" href="yoga.css">
</head>
<body>
    <div id ="lineup"></div>
    <div id="head">
        <a href="/" id="logotxt">Viveka Yoga</a>
    </div>
    <div id="linedown"></div>
    <script src="yoga.js"></script>
</body>
</html>
Getter Jetter
  • 2,033
  • 1
  • 16
  • 37