-1

I'm new to HTML and CSS and I have a problem. I'm working on responsive design and where I have a media screen of min-width 860px. I want my navigation text to be next to my logo. I managed to do this, but the navigation text is placed on top of my line instead of in the center.

(hope that makes sense)enter image description here

.netflix-logo {
  float:left;
  margin-right: 18px;
}
nav a {
  display:inline;
  vertical-align: middle;  
  color: white;
  margin: 9px 8px 0 0;
  text-decoration: none;
}

I tried working with vertical-align: middle and center but that didn't work either, could you please help me?

node_modules
  • 4,790
  • 6
  • 21
  • 37
Mila
  • 1

2 Answers2

2

You could use flexbox for that. Just put both of these elements in one container and all the previous styles which you used for positioning on .netflix-logo && nav a can be deleted. Flexbox will do everything itself.

.netflix-container {
   display:flex;
   justify-content:center
   align-items:center
}

P.S.: I strongly recommend you to read more about flexbox, it's an awesome tool for creating responsive designs.

Here are some guides:

node_modules
  • 4,790
  • 6
  • 21
  • 37
Aleksandre Geladze
  • 47
  • 1
  • 7
  • +1 for this, I also created a codepen for you to see the html,css and flexbox being used to align them 'center' https://codepen.io/shane-muirhead/pen/PoabwJK EDIT: float: left and right are such old ways to achieve certain layout. Strongly advise flexbox or css grid for more modern and advanced layouts. – Shane Muirhead Nov 07 '22 at 14:08
0

you can use display flex for layouts instead of floating.

if you need more information you can read here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

if you have doubts you can post your code to help

Varun J
  • 11
  • 2