html - 让文本出现在导航栏下

Question

我想让我的文字出现在屏幕中间。我已经这样做了，但我认为我以一种糟糕的编码方式完成了这项工作，我想看看是否有更好的方法来做到这一点。

所以我是这样做的

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

但我知道使用 margin-left: -725px; 并不令人惊奇，所以我想寻找另一种方法。

我的 html:

    <div class="parallax">

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <div class="logo"><img src="Images/logo1.png"></div>
        </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">a</a></li>
              <li><a href="#">b</a></li>
              <li><a href="#">c</a></li>
              <li><a href="#">d</a></li>
            </ul>
          </div><!--/.nav-collapse -->
      </div>
    </div>
    <div class="container">
            <div class="homeMess ">
            <h1> a| v
        </div>
    </div>
        </div>

CSS:

body {
    font-family: 'Open Sans', sans-serif, Arial;
    font-size: 16px;
    color: #6D6D6D;
    background-color: #F5F5F5;
    font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
    font-family: 'Montserrat', sans-serif, Arial;

    padding-bottom: 5px;
    color: #373432;
    line-height: 1em;
    font-weight: normal;
}
a {
    text-decoration: none;
    outline: none;
}


.parallax {
    background-image: url("../Images/back1.jpg");
    min-height: 1000px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
}

.parallax1 {
    min-height: 1000px;
}


.container {
    margin: 0;
    width: auto;
}   


.navbar-nav {
    float: right;
    margin-top: -15px;
}


.navbar-nav>li>a {
    line-height: 6px;
}


.navbar {
  padding-top: 46px;
  padding-right: 60px;
  font-size: 13px;
  text-transform: uppercase;
}

.navbar-default {
    background-color: transparent;
    border-top: 0px solid rgba(0, 0, 0, 0.5);
    border-bottom: 0px solid rgba(0, 0, 0, 0.5);
    border-left: 0px solid rgba(0, 0, 0, 0.5);
    border-right: 0px solid rgba(0, 0, 0, 0.5);
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
  height: 87px;
}

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

.navbar-default .navbar-nav > li > a:hover, 
.navbar-default .navbar-nav > li > a:focus {
      background-color: #F8BD23;
      text-decoration: none;
       color: #ffffff;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
    }

    .navbar-nav > li{
  padding-left:30px;

}

.logo {
    margin-left: 40px;
    margin-top: -17px;

}

.homeMess {

    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -109px;
    margin-left: -725px;
}

.homeMess h1 {
    font-size: 100px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 60px;
    letter-spacing: -5px;
    line-height: 50px;
    color: white;

}

所以我只是想让 homeMess 类位于屏幕中间，但我这样做的方式并不好。我也在使用 bootstrap v3。

Answer 1

如果 Colin 所说的不起作用 - 应该 - 只需尝试输入

text-align: center