Align a link in the middle along with the header beside it

My HTML header currently has a simple title bar with a back href. However, the headline <h1> is positioned UNDER the href, which is not what I want. I am looking to create a centered title bar with a headline and a button that are aligned at the same height.

html,
body {
    height: 100%;
    margin: 0;
    background-color: #EEEEEE;
    font-family: 'RobotoDraft', 'sans-serif';
}

header {
    background: #FFFFFF;
    height: 60px;
    width: 100%;
    box-shadow: 0px 2px 1px #888888;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

h1 {
    color: black;
    text-align: center;
    padding: 15px 0;
    margin: 0;
    font-size: 30px;
}
<header>
    <a href="#">Back</a>
    <h1>Photo Framed</h1>
</header>

Any suggestions on how I can achieve this?

This is the current appearance:

As a newcomer to HTML and CSS, I'm unsure how to prevent the title from being pushed down by the back href. In the future, I plan to replace the href with an image while maintaining the same alignment. Both the title and the image should have a padding of 15px and be at the same height.

htmlcss

Answer №1

To maintain consistency, you can define a specific line-height for your text and match it with the height of your h1.

a {
    float: left;
    line-height: 60px;
}

http://jsfiddle.net/epxhnohr/

Alternatively, you could opt for absolute positioning over float, and ensure the same line-height is applied.

a {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 60px;
}

http://jsfiddle.net/epxhnohr/1/

Answer №3

One possible solution is to utilize the display:inline-block; property.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Grid is failing to adjust its size to accommodate the width of the items

Is there a way to adjust the width of each grid box based on the content nested inside? For instance, in the case of the second testimonial where the item has a max-width of 500px, but the grid box remains unchanged. I attempted to set widths and max-wid ...

htmlcss

What is the best way to generate a CSS design with wavy patterns?

Check out the image below to see what I am attempting to create: https://i.sstatic.net/PlroF.png Here is my current code, but I need to make it more dynamic, similar to increasing the frequency rate of a sin or cosine wave. #wave { position: relativ ...

htmlcsscss-shapes

How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...

htmlcssasp.net

What could be the reason for my MVC 5 ASP.Net application functioning perfectly on my local machine but encountering issues when deployed to Azure

Looking for some help with my first question here. I've recently completed a small ASP.Net project focused on racing drivers and teams, which works well locally but encounters issues when deployed to Azure. The first problem I've encountered is ...

cssazureasp.net-mvc-5web-configvisual-studio-2015

Click on the navlink to open the HTML page in the same window

I have developed a navigation bar with a menu that includes options like home, about-us, and more. When I click on the navbar, the nav-menu slides down to display a list of navlinks. However, when I select a navlink, such as about-us, the nav menu slides b ...

jquerycss

Reducing the amount of nesting within selectors

Check out this code snippet: .signin-input{ input{ width: 100%; height: 2.5rem; color: black; :placeholder-shown{ opacity: 1; } } The CSS result looks like t ...

cssless

Ways to embed external HTML into my .aspx page using a JSP+JSTL alternative

Currently, I am working with JSP+JSTL (Java) to add some HTML to a webpage: <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="caasPath" value="http://wwww.MyExampleSite.com/header/default"/> <c:import url="${caas ...

htmlasp.net.net

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

How can I create an HTML table dynamically without knowing the template of each row in advance? Sometimes it may have 2 columns, sometimes 4... I am looking for something like this: <div> <h1>Angular HTML Table Example</h1> < ...

htmlangulartypescript

React app version displaying incorrect links to CSS and JS files

I have been immersed in a React project called Simple-portfolio, you can find the GitHub repository here: https://github.com/Devang47/simple-portfolio and the live site at this URL: While everything works smoothly on the development server, I encountered ...

javascripthtmlreactjstypescriptwebpack

What's the best way to make sure a div container fills in the remaining space between elements?

How can I make the center div take up the remaining space between the left and right divs, without covering them? The contents in the center can overflow hidden if necessary. View my code on jsFiddle HTML <div id=container> <div id=left> ...

htmlcssoverflow

Partial view remains stagnant despite successful ajax post completion

I am currently in the process of developing a system that will showcase uploaded images from a file input into a specific div within my view. (with intentions to incorporate document support in the future) The challenge I am facing is that the partial vie ...

javascripthtmljqueryajaxasp.net-core-mvc

Creating distinct web addresses for various sections of vue.js pagination

I've implemented pagination using vue.js for my website's gallery. However, I'm facing an issue where the URL doesn't change when navigating through pages and upon page refresh, it always resets to page 1. My goal is to have the URL ref ...

javascripthtmlvue.jspagination

Switch the content of a textbox by clicking on a hyperlink within a jQuery div that updates dynamically

In my HTML code, I have a specific requirement: when a user clicks on <img src="https://www.fast2sms.com/panel/img/icons/add1.png" class="add-img">, the textbox should dynamically populate with the value 123456789 (with a different value for each < ...

javascriptjqueryhtml

Tips for customizing the event target appearance in Angular 2?

After following the steps outlined in this particular blog post (section 3, event binding), I successfully added an event listener to my component class. I can confirm that it responds when the mouse enters and exits. <p class="title" (mouseenter)="unf ...

javascriptcssangularevents

Creating a scoreboard layout with HTML and CSS

I am attempting to create a scoreboard in the following format: 0 - 0 Home - Away The issue I am facing is that if the length of the Home team's name is longer, it pushes the dash (-) further. I want the dash to be a ...

htmlcss

Display a div when a button is clicked and hide it when clicking outside of the div

I attempted to create a function for displaying and hiding a div. To hide the div, users can use the close button or click outside the div. However, I encountered an issue where the close function to hide the div runs first if the user clicks an element ou ...

javascriptjqueryhtmlcss

Unable to collapse the Bootstrap dropdown menu

For the life of me, I can't seem to find a solution to my problem. I'm currently working on creating a responsive navbar for my website by following a tutorial. The goal is to make it mobile-friendly with a button that expands the menu on smaller ...

javascriptjqueryhtmlcsstwitter-bootstrap

Challenges with Internet Explorer 8 regarding a customized appearance for drop-down

I am facing an issue with my custom styled drop downs that are being controlled by jQuery. The problem is that in IE8, the drop down always defaults to open and does not close when an item is selected. URL removed <section class="main"> ...

jquerycssinternet-explorer-8

CSS descendant selector add style excluding child elements

My issue involves two divs each containing a table. When I apply the CSS class "table" to the first div, the second table in the div is impacted as well. .tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { background-color:red; width:25px; } ...

htmlcss

rearranging the positioning of links in the HTML navbar

Is there a way to prevent other links in the navbar from moving up slightly when hovering over one link and creating a line (border bottom)? ` .n24{ margin-top: 2px; padding: 14px 14px; } .n25{ margin-top: 2px; padding: 14px 14px; } . ...

htmlcss