How to align text vertically? (in The Box Model: Davie's Burgers project)

I would like to align the h1 text (ie BBQ Bacon Burger) vertically in the middle of the blue background not matter how I resize the browser, may I ask how can I do so in the CSS file?
Thanks

Do you have a link to this exercise?

https://www.codecademy.com/paths/web-development/tracks/getting-more-advanced-with-design/modules/learn-css-box-model/projects/box-model-on
Thanks a lot

2 Likes

Give this a try…

.header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 80px /*40px*/;
  width: 68%;
  /*padding: 20px;*/
  margin: 0 auto;
  position: relative;
  top: 120px;
}

Aside

Padding is the closest thing to evil that there is in the CSS lexicon. It causes more problems than it solves. I go to every length to avoid using padding at all, ever.

1 Like
.header h1 { 
  background-color: #05A8AA;

If you want to actually see the burger,

.header h1 {
  background-color: #05A8AA20;

The added value, 20 represents opacity. Not sure if it is hex or decimal. Opacity is set as a percentage.

1 Like