vertical align text Dreamweaver header

Report · May 07, 2020

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;"> <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"> </span></h1>
</blockquote>
</blockquote>
</div>
<nav class="secondary_header" id="menu">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
<li>CONTACT</li>
</ul>
</nav>
</header>

Report · May 07, 2020

Simplify your html structure:

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

}

Report · May 07, 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

Report · May 07, 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 & Moderator