Tips for aligning content vertically within a header:

Question

Tips for aligning content vertically within a header:

I'm currently working on creating a responsive header with two columns. My goal is to have the button in the right column vertically centered.

I am aware of the method for centering items using 'top: 50%; margin-top: -xy px', but my button has a fixed height of 40px.

To implement this method, I tried wrapping the button in a 'div {position: relative}'. However, this did not work because the div does not stretch its own height.

Is there a CSS solution to achieve vertical centering? Initially, I considered Flexbox as an option, but it lacks browser compatibility.

Check out the JSFIDDLE DEMO

html css

Answer 1

Answer №1

One way to streamline your code is by eliminating floats and using display: inline-block instead, as well as getting rid of the unnecessary .relative div.

Check out this Working Fiddle for reference

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
header {
  background: red;
  color: #fff;
  padding: 0.5em;
}
header h1 {
  font-size: 2em;
  margin: 0 0 0.2em;
}
header p {
  margin: 0;
}
header button {
  height: 40px;
  width: 70px;
}
.column-left {
  display:inline-block;
  width: 70%;
  vertical-align: middle;
}
.column-right {
  width: 29%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* responsive */
@media (min-width: 200px) {
  header {
    padding: 1em;
  }
}
@media (min-width: 300px) {
  header {
    padding: 1.5em;
  }
}
@media (min-width: 400px) {
  header {
    padding: 2em;
  }
}
@media (min-width: 500px) {
  header {
    padding: 2.5em;
  }
}
@media (min-width: 600px) {
  header {
    padding: 3em;
  }
}
/* helpers */
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

Answer 2

One way to streamline your code is by eliminating floats and using display: inline-block instead, as well as getting rid of the unnecessary .relative div.

Check out this Working Fiddle for reference

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
}
header {
  background: red;
  color: #fff;
  padding: 0.5em;
}
header h1 {
  font-size: 2em;
  margin: 0 0 0.2em;
}
header p {
  margin: 0;
}
header button {
  height: 40px;
  width: 70px;
}
.column-left {
  display:inline-block;
  width: 70%;
  vertical-align: middle;
}
.column-right {
  width: 29%;
  text-align: right;
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
/* responsive */
@media (min-width: 200px) {
  header {
    padding: 1em;
  }
}
@media (min-width: 300px) {
  header {
    padding: 1.5em;
  }
}
@media (min-width: 400px) {
  header {
    padding: 2em;
  }
}
@media (min-width: 500px) {
  header {
    padding: 2.5em;
  }
}
@media (min-width: 600px) {
  header {
    padding: 3em;
  }
}
/* helpers */
.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

Answer 3

Answer №2

Get rid of the position: relative in this div and instead apply it to the header tag. You can also consider removing the column-right div.

Alternatively, you could try:

header button {
  top: 50%;
  transform: translateY(-50%); // This is a better alternative to using negative margin-top (especially helpful when dealing with buttons of varying heights, compatible with IE9+ using -ms- prefix)
}

JSFIDDLE Link

Answer 4

Get rid of the position: relative in this div and instead apply it to the header tag. You can also consider removing the column-right div.

Alternatively, you could try:

header button {
  top: 50%;
  transform: translateY(-50%); // This is a better alternative to using negative margin-top (especially helpful when dealing with buttons of varying heights, compatible with IE9+ using -ms- prefix)
}

Tips for aligning content vertically within a header:

Answer №1

Answer №2

JSFIDDLE Link

Similar questions

javascript add items to a container

Displaying recorded information from PHP/MySQL dropdown menu

Is the canvas refusing to disappear?

Creating a horizontal alignment for social media icons

How to Restrict the Number of Rows Displayed in an Angular 4 Table

I'm having trouble pinpointing the origin of the gap at the top of my website, even after thoroughly reviewing all my tags

CSS that relies on the presence of a specific class

Creating a Dynamic Clear Button for a Text Area in Angular

there is no minimum height specified for the table

The response from my ajax call is accurate, but it does not seem to be triggering any action

Choosing each item from a lineup, one by one

Resizing the background while scrolling on a mobile web browser

Directing a webpage to a particular moment within that page

Using flexbox to adjust the height of a block in the layout

Grammarly is seamlessly inserting padding into my body element

Command line functionality to eliminate comments in HTML minifier

In PHP, the use of ul, li, class, and

Updating rows within a table dynamically using AJAX

What could be causing the show button to change its style every time I click it?

CSS: Revert INPUT Element Back to Default Width