更改字體大小和對齊navbar品牌

Question

我有一個導航欄，工作正常，但我希望navbar品牌有不同的風格字體和大小，並垂直居中，但它似乎改變其位置，當我查看它在不同的位置瀏覽器和媒體類型，而不會處於中間位置，即在iPhone和平板電腦上。

CSS代碼是：

a[href^=tel] { color: inherit; text-decoration: none; } 
.navbar-default { 
    padding-left:0px; 
    padding-right:0px; 
    border: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    background-color: #00a3fe; 
    font-size: 14pt;font-weight: 400;} 

a:hover { 
    text-decoration:none; 
} 


.nav.navbar-nav.navbar-right li a { 
    color: #ffffff; 
} 

.nav.navbar-nav.navbar-nav li a { 
    color: #ffffff; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    background-color: #49bdfe; 
    color: #FFFFFF; 
} 

.navbar-toggle, .icon-bar { 
    border:1px solid white; 
    background-color:white; 
} 

.navbar-toggle { 
    color: : white; 
    border: none; 
    background: transparent !important; 
} 
.navbar-toggle:hover { 
    background: transparent !important; 
} 

.navbar-toggle { 
    border: none; 
    background: transparent !important; 
} 
.navbar-toggle:hover { 
    background: transparent !important; 
} 
.navbar-toggle .icon-bar { 
    width: 22px; 
    transition: all 0.2s; 
} 
.navbar-toggle .top-bar { 
    transform: rotate(45deg); 
    transform-origin: 10% 10%; 
} 
.navbar-toggle .middle-bar { 
    opacity: 0; 
} 
.navbar-toggle .bottom-bar { 
    transform: rotate(-45deg); 
    transform-origin: 10% 90%; 
} 
.navbar-toggle.collapsed .top-bar { 
    transform: rotate(0); 
} 
.navbar-toggle.collapsed .middle-bar { 
    opacity: 1; 
} 
.navbar-toggle.collapsed .bottom-bar { 
    transform: rotate(0); 
} 

.btn { 
    display: inline-block; 
    padding: 6px 12px; 
    margin-bottom: 0; 
    font-size: 14px; 
    font-weight: normal; 
    line-height: 1.42857143; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: middle; 
    cursor: pointer; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
    background-image: none; 
    border: 1px solid transparent; 
    border-radius: 4px; 
    padding: 10px 16px; 
    transition: all 0.4s ease 0s; 
} 

.btn-lg { 
    font-size: 18px; 
    line-height: 1.33; 
    border-radius: 6px; 
} 

.btn-primary { 
    color: #fff; 
    background-color: #49bdfe; 
    border-color: #357ebd; 
} 

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
    color: #fff; 
    background-color: #3276b1; 
    border-color: #285e8e; 
} 

和HTML是：

<nav class='navbar navbar-default'> 
<div class='container'> 
<div class='navbar-header'> 
<button type='button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'> 
<span class='sr-only'>Toggle navigation</span> 
<span class='icon-bar top-bar'></span> 
<span class='icon-bar middle-bar'></span> 
<span class='icon-bar bottom-bar'></span></button> 
<span class='navbar-brand'>My Site</span> 
    </div> 
<div class='collapse navbar-collapse' id = 'example-navbar-collapse'> 
<ul class='nav navbar-nav'> 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>About</a></li> 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Get bids</a></li> 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Register company</a></li> 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Contact</a></li> 
</ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</div> 
</nav> 

Answer 1

您可以使用display: flex; align-items: center保持它垂直對齊。

a[href^=tel] { color: inherit; text-decoration: none; } 
 
.navbar-default { 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    border: 0; 
 
    -webkit-border-radius: 0; 
 
    -moz-border-radius: 0; 
 
    border-radius: 0; 
 
    background-color: #00a3fe; 
 
    font-size: 14pt;font-weight: 400;} 
 

 
a:hover { 
 
    text-decoration:none; 
 
} 
 

 

 
.nav.navbar-nav.navbar-right li a { 
 
    color: #ffffff; 
 
} 
 

 
.nav.navbar-nav.navbar-nav li a { 
 
    color: #ffffff; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
 
    background-color: #49bdfe; 
 
    color: #FFFFFF; 
 
} 
 

 
.navbar-toggle, .icon-bar { 
 
    border:1px solid white; 
 
    background-color:white; 
 
} 
 

 
.navbar-toggle { 
 
    color: : white; 
 
    border: none; 
 
    background: transparent !important; 
 
} 
 
.navbar-toggle:hover { 
 
    background: transparent !important; 
 
} 
 

 
.navbar-toggle { 
 
    border: none; 
 
    background: transparent !important; 
 
} 
 
.navbar-toggle:hover { 
 
    background: transparent !important; 
 
} 
 
.navbar-toggle .icon-bar { 
 
    width: 22px; 
 
    transition: all 0.2s; 
 
} 
 
.navbar-toggle .top-bar { 
 
    transform: rotate(45deg); 
 
    transform-origin: 10% 10%; 
 
} 
 
.navbar-toggle .middle-bar { 
 
    opacity: 0; 
 
} 
 
.navbar-toggle .bottom-bar { 
 
    transform: rotate(-45deg); 
 
    transform-origin: 10% 90%; 
 
} 
 
.navbar-toggle.collapsed .top-bar { 
 
    transform: rotate(0); 
 
} 
 
.navbar-toggle.collapsed .middle-bar { 
 
    opacity: 1; 
 
} 
 
.navbar-toggle.collapsed .bottom-bar { 
 
    transform: rotate(0); 
 
} 
 

 
.btn { 
 
    display: inline-block; 
 
    padding: 6px 12px; 
 
    margin-bottom: 0; 
 
    font-size: 14px; 
 
    font-weight: normal; 
 
    line-height: 1.42857143; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
     -ms-user-select: none; 
 
      user-select: none; 
 
    background-image: none; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    padding: 10px 16px; 
 
    transition: all 0.4s ease 0s; 
 
} 
 

 
.btn-lg { 
 
    font-size: 18px; 
 
    line-height: 1.33; 
 
    border-radius: 6px; 
 
} 
 

 
.btn-primary { 
 
    color: #fff; 
 
    background-color: #49bdfe; 
 
    border-color: #357ebd; 
 
} 
 

 
.btn-primary:hover, 
 
.btn-primary:focus, 
 
.btn-primary:active, 
 
.btn-primary.active, 
 
.open .dropdown-toggle.btn-primary { 
 
    color: #fff; 
 
    background-color: #3276b1; 
 
    border-color: #285e8e; 
 
} 
 

 
.navbar-brand { 
 
    font: 24px cursive!important; 
 
    display: flex; 
 
    align-items: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class='navbar navbar-default'> 
 
<div class='container'> 
 
<div class='navbar-header'> 
 
<button type='button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'> 
 
<span class='sr-only'>Toggle navigation</span> 
 
<span class='icon-bar top-bar'></span> 
 
<span class='icon-bar middle-bar'></span> 
 
<span class='icon-bar bottom-bar'></span></button> 
 
<span class='navbar-brand'>My Site</span> 
 
    </div> 
 
<div class='collapse navbar-collapse' id = 'example-navbar-collapse'> 
 
<ul class='nav navbar-nav'> 
 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>About</a></li> 
 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Get bids</a></li> 
 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Register company</a></li> 
 
<li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'>Contact</a></li> 
 
</ul> 
 
    <ul class='nav navbar-nav navbar-right'> 
 
     <li><a href='about.php' class='btn btn-primary btn-lg sharp' role='button'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
 
    </ul> 
 
</div> 
 
</div> 
 
</nav>