0

How can I make the text logo in the center of the header from top to bottom, not in the center left to right

enter image description here

header{
background-color: black;   
width:100%;
height: 50px; 
position: fixed;
z-index: 999;
}

.logo
{
float: left;
margin-left:200px;
font-size: 30px;
font-weight: bold;
color:
dpapadopoulos
  • 1,834
  • 5
  • 23
  • 34
Nawal
  • 25
  • 1
  • 3
  • Have a look here https://stackoverflow.com/a/6182661/7873631 – Xitish Feb 24 '19 at 09:41
  • Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – blurfus Feb 28 '19 at 01:40

2 Answers2

0

Don't use float: left. The best way is to use flexbox containers. You need give to header

display: flex;
align-items: center;


header{
  background-color: black;   
  width:100%;
  height: 50px; 
  position: fixed;
  z-index: 999;
  display: flex;
  align-items: center;
}

.logo {
  color: white;
  margin-left:200px;
  font-size: 30px;
  font-weight: bold;
}
<header>
  <div class="logo">Some Logo</div>
</header>
Andrew Kovalchuk
  • 897
  • 1
  • 10
  • 29
0

this simple change can make it

header{
    background-color: black;   
    width:100%;
    height: 50px; 
    position: fixed;
    text-align: center;
    z-index: 999;
    }

.logo{
    font-size: 30px;
    font-weight: bold;
    color:white
}
hamza benammi
  • 26
  • 3