Align two text elements of varying heights at the center of a container

I need to style a fixed-height container with a width of 100% that is set to display:block.

Inside this container, there are two text elements styled differently in terms of font-size, and floated left and right respectively.

Here's the HTML structure:

<header>
    <h1 class="right">Title</h1>
    <h2 class="left">Slogan</h2>
</header>

And here's the CSS styling:

header{ position:fixed; width:100%; height:5em; }
header h1{ font-size:3em; margin:0; }
header h2{ font-size:2em; margin:0; }

I am trying to vertically center these text elements without using display:table-cell. Since the font-sizes are different and specified in em units rather than pixels, I also cannot resort to using line-height.

Is there a way to achieve vertical centering for these text elements?

htmlcsspositioncenter

Answer №1

Ensure your line-height matches the height. It should be written as follows:

header{ position:fixed; width:100%; height:5em;line-height:5em; }

Answer №2

Just brainstorming here, but I believe a solution similar to the following could be effective:

header h1 { font-size:3em; margin:0; float:right; top:50%; position:relative; margin-top:-0.5em;}
header h2 { font-size:2em; margin:0; float:left; top:50%; position:relative; margin-top:-0.5em;}

[UPDATE] At this time, my commenting capabilities are limited. However, Sandeep's suggestion is successful due to the fact that the line-height is inherited by the child elements, consequently providing them with a suitable line-height.

Answer №3

When dealing with a site title and slogan that tend to remain consistent over time, one effective approach is to adjust the margin-top values for each element until they align perfectly according to your visual preferences.

Answer №4

It seems that you are using EMs for font-size measurement, which suggests that the text has the ability to increase or decrease in size. One way to address this would be to utilize a JavaScript solution, such as the following jQuery code snippet:

$('h1, h2').each(function(){
    var headerHeight = $(this).outerHeight();
    $(this).css('margin-top', '-' + headerHeight / 2 + 'px');
});

In addition to the JavaScript code, you can also include some CSS styling like the example below:

h1, h2 {position: absolute; top: 50%;}

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

Incorporating HTML into C++: A Guide to Seamlessly

I am fairly new to html and c++, but I have a strong background in c#. Recently, I created my very first c++ program - a basic banking system. Now, I am seeking guidance on how to incorporate html into this project. Specifically, I need help displaying the ...

htmlc++

Is it possible to use HTML alone in Bootstrap 5 to link a button to display a toast notification?

I'm working on a Bootstrap page that includes a button and a toast element sourced from the Bootstrap documentation. The documentation states that I need to initialize the toast in JavaScript during page load. My goal is to have the toast appear when ...

javascripthtmldombootstrap-5toast

Use jQuery to trigger a click event when an element is in focus, unless it was clicked to

I am currently developing a website using the MDL framework. One issue I encountered is that there is no default select form element provided. After some research, I found a solution by utilizing a menu component that displays when the input is clicked. Th ...

javascriptjqueryhtmlmaterial-design-lite

Learn the process of adding a tag to specific text with the help of JavaScript

I am attempting to implement a feature where the selected text will have a tag added to it. Within a textarea, I have some text entered. The goal is that when I select specific text from the textarea and click a code button, it should insert the tags aro ...

javascripthtml

Quick access to HTML URLs without the need for page names

I'm having trouble finding the right search terms. Is there a way to simplify the URL links on my website? For instance: Current URL structure: websitename.com/about_us_what_we_do.php Desired URL structure: websitename.com/what-we-do Another e ...

phphtml

How can I show information on the same page as a link by simply clicking on it?

My goal is to create a functionality where clicking on a link will display specific information. Currently, all the links and their corresponding information are displayed at once. I want to change this so that the links are displayed first, and the inform ...

javascriptjqueryhtml

Styling elements conditionally in React JS using inline styles

If the status of this task is 'Completed', I would like to hide the button (similar to adding a display: none property). Code: <Button size="small" style={{display:this.state.task.status == "Completed" ? "none":""}} ...

reactjscssmaterial-ui

Storing user responses in an array using jQuery Form

I have developed a form/questionnaire that prompts users with a series of questions. The initial question categorizes users into two groups, either trucks or cars in this scenario. Subsequently, the form delves into specific questions about the chosen vehi ...

javascriptjqueryhtmlarraysforms

In Firefox, there is a peculiar issue where one of the text boxes in an HTML form does not display

In my HTML form, users can input their first name, last name, and phone number to create an account ID. The textboxes for first name, last name, and account ID work smoothly on all browsers except Firefox. Surprisingly, the phone number textbox doesn' ...

javascripthtmlcss

Can data be transferred between browsers, such as from Google Chrome to Mozilla Firefox?

I have a dilemma with two separate pages—one for Admin and the other for User. The Admin page is named index.html <!DOCTYPE html> <html lang="en"> <head> <style> * { padding: 0; ...

javascriptphphtmlnode.jsweb

An elementary React project facing compilation issues

I'm currently exploring react hooks, but I encountered an error with the useReducer hook. The console displays the following error message: "Invalid hook call. Hooks can only be called inside of the body of a function component. This could happe ...

javascripthtmlnode.jsreactjsnpm

Splitting the page into four sections with a unique H layout using CSS styling

Attempting to create an H page layout: body { background-color: grey; background-size: 100%; background-repeat: no-repeat; } html, body { height: 100%; margin: 0px; } .a { float: left; width: 25%; height: 100%; border: 1px solid blue ...

htmlcssflexboxcss-float

Handling mousewheel events for child elements and their parent element

I developed a custom jQuery plugin that replaces the default scrollbar with my own, managing mousewheel and bar dragging events. The issue arises when I place content containing my custom scrollbar within another content also using my scrollbar. When I sc ...

javascriptjqueryhtmlcssmousewheel

The Chrome browser's default stylesheet is overriding the styles of my website

I'm experiencing an issue with the CSS styling on one of my website pages. Here is the CSS code for formatting links: a:link, a:visited, a:active { color: white; text-decoration: none; font-weight: bold; } However, despite these styles, ...

htmlruby-on-railscssgoogle-chromeweb

Showing a notification that is persistent and not dismissible

Hello everyone! I've been struggling with a problem on the RPS project for quite some time now. The issue arises when I try to display a message for a tie in the game, but I can't seem to find a solution to make it disappear when the round is not ...

javascripthtmlcss

Navigate to a fresh HTML page upon form submission

I'm completely new to the world of web apps and JavaScript, and I'm facing an issue where my form submission doesn't redirect me to a thank you page. Instead, it just leads to a blank page every time. I've tried researching solutions on ...

javascripthtmlnode.jsexpress

Error copying cell width attribute when using border collapse

Currently, I am attempting to duplicate a table header by copying the tr HTML and then replicating the th widths. Unfortunately, this method is unsuccessful as the widths are displayed as (width minus W) pixels when border: 'Wpx' and border-colla ...

javascriptjquerycss

Exploring various viewport dimensions using Django and Selenium

I am currently experimenting with testing the characteristics of specific UI elements at various viewport sizes and media query breakpoints defined in CSS. Initially, I have a setup function that initializes a headless Chrome browser with what I believe is ...

pythoncssdjangoseleniumtesting

Switch from flexbox layout to begin on the next column within the same row

I am attempting to create a CSS layout where, after a specific element like :nth-child(6), the elements will break and form a separate column within the same row. The parent element should split into 2 columns after every 6th element in the same row, then ...

htmlcssangular

Deactivate the second subradio button when the first option is selected and vice versa

Need some assistance, hoping for your help. I have 2 choices with subcategories. 1 - Option A ---- variant 1 ---- variant 2 ---- variant 3 2 - Option B ---- variant 4 ---- variant 5 ---- variant 6 Check out my code here Users must choose betwe ...

javascriptphpjqueryhtml