Aligning items in the header bar with floating <li> elements

Question

Aligning items in the header bar with floating <li> elements

I'm struggling with centering an element in the header bar of my website. I currently have a single header bar at the top, and inside the <header> tag, there's an unordered list with some items floating left and one floating right. Now, I want to position another element right in the middle of this header. Here’s how my current setup looks like:

<header>
  <ul>
    <li class="left">Item 1</li>
    <li class="right">Item 2</li>
  <ul>

  <h1>Title of site</h1>
</header>

To try and center the <h1> tag, I've applied styles like text-align: center and margin-top: -45px to align it with the other list items. However, the title still doesn’t look perfectly centered. Can anyone suggest the best approach to achieve the desired behavior for the header?

For reference, you can check out this example on Jsfiddle, where you'll notice that the title isn't quite aligned exactly at the center.

html css html-lists

Answer 1

Answer №1

If you need something to be perfectly aligned in the center but can't use text-align:center;, here's a helpful trick:

1) Determine the exact width of the element you want to center (div, hx tag, etc)
2) Use absolute positioning so that the element's position isn't influenced by other elements
2) Set left:50% on the item (making its start exactly halfway) and then apply margin-left: negative half of the item's width.

For example, In your JS Fiddle, if your h1 is 106px wide, you would write this in its CSS:

header h1 {
    position:absolute;
    width:106px;
    left:50%;
    margin-left:-53px;
    top:6px;
    font-size: x-large;
    color: white;
}

UPDATED JS FIDDLE

Answer 2

If you need something to be perfectly aligned in the center but can't use text-align:center;, here's a helpful trick:

1) Determine the exact width of the element you want to center (div, hx tag, etc)
2) Use absolute positioning so that the element's position isn't influenced by other elements
2) Set left:50% on the item (making its start exactly halfway) and then apply margin-left: negative half of the item's width.

For example, In your JS Fiddle, if your h1 is 106px wide, you would write this in its CSS:

header h1 {
    position:absolute;
    width:106px;
    left:50%;
    margin-left:-53px;
    top:6px;
    font-size: x-large;
    color: white;
}

UPDATED JS FIDDLE

Answer 3

Answer №2

Have you considered experimenting with the following code:

h1 { position: absolute; top: 45px; left: 45%; }

Alternatively, you may want to try inserting a new div above the header as shown below:

<div id="h1wrapper">Your h1 goes here</div>

Make sure to include this in your CSS:

#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }

Answer 4

Have you considered experimenting with the following code:

h1 { position: absolute; top: 45px; left: 45%; }

Alternatively, you may want to try inserting a new div above the header as shown below:

<div id="h1wrapper">Your h1 goes here</div>

Make sure to include this in your CSS:

#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }

Aligning items in the header bar with floating <li> elements

Answer №1

Answer №2

Similar questions

Preserve content from a hyperlink using JavaScript

Is there a way to position text to the right of an image?

The jQuery animation concludes before its anticipated completion

What steps can be taken to stop 'type-hacking'?

Change the right border style for the second and third ToggleButtons in the ToggleButtonGroup

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

How to add a new row to a Kendo grid with a unique custom styling

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

Converting Variable Values to Element IDs in JavaScript: A Helpful Guide

Is the 404 error a result of the ajax code?

Conceal the year, month, and day within a datetime-local input

A guide to spinning an image in every direction with CSS

Address Book on Rails

Learn how to customize the global style within a child component in Angular and restrict the changes to only affect that specific component

Display a concealed text box upon clicking BOTH radio buttons as well as a button

The various options in the dropdown menu are descending in order

The issue with jspdf is that it is failing to generate PDF documents of

Combining keyframe properties in a more efficient way using less code

Using Firebase with the async pipe in Angular 5

Creating dynamic animations by shifting the hue of an image on a canvas