Question

我的导航栏显示最底部的文字。我认为VISA标志与之相矛盾。有人可以帮我垂直居中吗？

我已经附加了我正在使用的CSS文件和HTML文件。这些单词当前位于栏的底部，预设为67px的高度（我不知道如何自动设置导航栏的高度以使图像和文本垂直居中...

非常感谢

＆＃13;

#include<stdio.h>
#include<stdlib.h>
#include<ctype.h>
#include<string.h>
#include<math.h>


int main()
{

   int uppercase, digit = 0;
   int i;
   char pass [100];

   printf("Please input a password\n");
   scanf(" %s", pass);

   for(i=0;i<=100;i++)
   {
            if(isupper(pass[i])){uppercase = 1;}
            if(isdigit(pass[i])){digit = 1;}
   }

    if(uppercase==1  && digit==1){printf("Your password is good!");
    }else{printf("Your password sucks");}


    return 0;
    }

＆＃13;

.navbar-default {
  border-color: rgba(34, 34, 34, .05);
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 100;
  background-color: #fff;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  transition: all .35s;
  max-height: 67px;
}
.navbar-default .navbar-header .navbar-brand {
  text-transform: uppercase;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: #7a96ea;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
  color: #4169e1;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: inline;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
  color: #7a96ea;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
  color: #7a96ea!important;
  background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
  background-color: transparent;
}

＆＃13;

Answer 1

从以下规则中删除display: inline;，原因是您无法在inline元素上设置大小。所以引导程序所做的所有花哨的中心都不适用。

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
  display: inline;
}

看起来应该是这样，

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  color: #222;
}

然后将以下规则添加到CSS中，并从<img>中的.navbar-brand标记中删除样式属性。

（Demo）

.navbar-header {
  position: relative;
}
.navbar-brand {
  position: absolute;
  top: 0;
  bottom: 0;
  white-space: nowrap;
}
.navbar-brand::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.navbar-brand img {
  margin: 0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

在导航栏中垂直居中文本

1 个答案: