Skip to main content
B
Bobby Joon
Participant
May 7, 2020
Question

vertical align text Dreamweaver header

  • May 7, 2020
  • 3 replies
  • 1987 views

Full disclosure:  I'm a novice.

I added logo image to header and the header box became wider, making a line of text to the right of the logo sit on the bottom of the header.  I want the line of text to be in the center of the header box.  I tried using "vertical-align: 50px" in the html code following the text but it didn't do anything.

Simple suggestions for how to accomplish the re-alignment is appreciated.  This is the code:

<header>
<div class="primary_header">
<blockquote>
<blockquote>
<h1 class="headermain.title"> <img src="Magnus Logo.png" width="67" height="100" alt=""/><span class="headermain" style="font-family: lato; font-style: normal; font-weight: 400; font-size: 50px;">&nbsp;<span style="font-family: maven-pro; font-style: normal; font-weight: 400; font-size: 50px; text-align: center;">COMPANY NAME</span></span><span style="font-family: maven-pro;font-style: normal;font-weight: 400;line-height: 50px">&nbsp;</span></h1>
</blockquote>
</blockquote>
</div>
<nav class="secondary_header" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
</header>

    This topic has been closed for replies.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    May 7, 2020

    I agree that the markup needs to be cleaner.   See screenshot and code.

     

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
padding:0 3%;
display:flex;
flex-direction:column;
height:100vh;
font-size: 16px;
font-size: 1rem;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}
/**Header**/
header img {
vertical-align: middle;
max-width: 100%;
}
header h1 {
display: inline;
text-align: center;
font-size: 2rem;
}
/**Navigation Menu**/
nav ul {
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
background: rgb(2,139,174);
padding: 0.5rem 0;
white-space: nowrap;
font-size: small;
}
nav li {
display: block;
list-style-type: none;
text-align: center;
}
/**Nav links**/
nav li a {
text-decoration: none;
font-weight: 600;
color: #FFF;
padding: 0 0.5rem;
}
nav li a:hover, 
nav li a:active, 
nav li a:focus { text-decoration: underline; 
}
main {
height:auto;
flex:1;
}
</style>
</head>

<body>
<!--Header-->
<header> <img src="https://dummyimage.com/200x200" alt="XYZ Brand Logo">
<h1>COMPANY NAME </h1>
</header>

<hr>
<!--Navigation-->
<nav>
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

<hr>
<!--Main Content-->
<main>
<h3>Main Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ratione delectus, ea, placeat magni labore. Tenetur autem earum architecto, ad debitis, eveniet iure assumenda, quos repellendus alias cupiditate dolor labore.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam ratione delectus, ea, placeat magni labore. Tenetur autem earum architecto, ad debitis, eveniet iure assumenda, quos repellendus alias cupiditate dolor labore.</p>
</main>

<hr>
<!--Footer-->
<footer>
<small>©2020 XYZ Company, all rights reserved</small>
</footer>
</body>
</html>

     

     

    Nancy O'Shea— Product User & Community Expert
    hans-g.
    hans-g.
    Legend
    May 7, 2020

    Hi Bobby,

    if I understand you in the right way, so you could use the source code of my test-website

    http://hansgd.de/DWTest/TextUmfliessen/TextUmfliessenInitialeBild02.php 

    Please feel free to play with their diverse parameters.

     

    Hans-Günter

    O
    osgood_
    Legend
    May 7, 2020

    Simplify your html structure:

     

    <div class="primary_header">

    <img src="Magnus Logo.png" width="67" height="100" alt="">

    <h1>COMPANY NAME</h1>

    </div>

     

    Then use css to add styling to the elements (do you know how to deploy css in a linked css stylesheet or embedded between <style></style> tags in the <head></head> section of your page?)

     

    Css stylings:

     

    .primary_header {

    display: flex;

    align-items: center;

    }

     

    .primary_header h1 {

    margin: 0;

    padding: 0;

    font-family: helvetica, sans-serif;

    font-size: 50px;

    font-weight: 400;

    }

     

     

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices