CSS如何将这个div居中

Question

有人可以尝试帮助我将此div居中吗？帮助将不胜感激！

.navbar a {
 text-decoration: none;
 color: black;
}

.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand"> 
  <span>O</span>ne<span>D</span>ata</a>
</div>

Answer 1

只需将 text-align: center 应用于.navbar：

.navbar a {
  text-decoration: none;
  color: black;
}

.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

.navbar {
  text-align: center;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand">
    <span>O</span>ne<span>D</span>ata</a>
</div>

Answer 2

在类.navbar a.navbar-brand中使用text-align: center;和display: block;

     .navbar a {
        text-decoration: none;
        color: black;
       
      }

      .navbar a.navbar-brand {
        height: inherit;
        line-height: inherit;
        padding-top: 25px;
        font-size: 32px;
        text-transform: uppercase;
        font-weight: 400;
        letter-spacing: 2px;
        text-align: center;
        display: block;
      }

      .navbar a.navbar-brand span {
        font-size: 38px;
        font-weight: 700;
      }

<div class="navbar">
    <a href="#!/home" class="navbar-brand"> 
    <span>O</span>ne<span>D</span>ata</a>
 </div>

Answer 3

只需将此类添加到您的CSS文件中即可：

.navbar {
    text-align: center;
    display: block;
}

或将此样式添加到您的div元素中：

style =“ text-align：center; display：block;”

<div class="navbar" style="text-align:center; display: block;">
    <a href="#!/home" class="navbar-brand"> 
    <span>O</span>ne<span>D</span>ata</a>
</div>

希望有帮助。

Answer 4

您可以添加

 .navbar{
     text-align: center;
   }

Answer 5

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar a {
 text-decoration: none;
 color: #000000;
}
.navbar a.navbar-brand {
  height: inherit;
  line-height: inherit;
  padding-top: 25px;
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 2px;
}

.navbar a.navbar-brand span {
  font-size: 38px;
  font-weight: 700;
}

<div class="navbar">
  <a href="#!/home" class="navbar-brand"> 
  <span>O</span>ne<span>D</span>ata</a>
</div>