Блог

Главная - Вопросы по программированию - Как мне выровнять мое содержимое по центру?

Как мне выровнять мое содержимое по центру?

#html #css

#HTML #css

Вопрос:

Итак, у меня возникла проблема, для которой я не смог найти решение. Мне было интересно, может ли кто-нибудь помочь мне выровнять мои кнопки по центру. Я не знаю, почему у меня возникла эта проблема, обычно у меня ее нет. Просто примите во внимание, что я сделал кнопки странно, вы поймете, когда увидите код.

 #navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
}

.nav-btn-add {
  padding-top: 4vh;
  padding-bottom: 4vh;
  padding-left: 4vw;
  padding-right: 4vw;
}

.btn-inline-block {
  display: inline-block;
  text-align: center;
}

.nav-btn {
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  cursor: pointer;
  background-color: transparent;
  color: white;
  transition: .5s;
}

.nav-btn:hover {
  background-color: transparent;
  color: #00C5CD;
  border-color: #00C5CD;
}  
 <div id="navbar-wrapper">
  <div class="url-cnt">
    <div class="btn-block">
      <form method="get" action="">
        <button class="nav-btn-add" type="submit"><a>ADD TO SERVER</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>DISCORD</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>COMMANDS</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>UPVOTE</a></button>
      </form>
    </div>
  </div>
</div>

Комментарии:

1. В вашем коде я вижу одну большую кнопку, расположенную в первой строке, за которой следуют еще 3 кнопки, расположенные в следующей строке …. какой контент вы хотите разместить посередине?

Ответ №1:

Добавьте text-align: center свою родительскую оболочку #navbar-wrapper 

 #navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

https://jsfiddle.net/d5wmto93/

Ответ №2:

Установите text-align в center в #navbar-wrapper 

 #navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

.nav-btn-add {
  padding-top: 4vh;
  padding-bottom: 4vh;
  padding-left: 4vw;
  padding-right: 4vw;
}


.btn-inline-block {
  display: inline-block;
  text-align: center;
}

.nav-btn {
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  cursor: pointer;
  background-color: transparent;
  color: white;
  transition:.5s;
}

.nav-btn:hover {
  background-color: transparent;
  color: #00C5CD;
  border-color: #00C5CD;
}  
 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
 
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="navbar-wrapper">
      <div class="url-cnt">
        <div class="btn-block">
        <form method="get" action="">
          <button class="nav-btn-add" type="submit"><a>ADD TO SERVER</a></button>
        </form>
        </div>
        <div class="btn-inline-block">
        <form method="get" action="commands.html">
          <button class="nav-btn" type="submit"><a>DISCORD</a></button>
        </form>
        </div>
        <div class="btn-inline-block">
        <form method="get" action="commands.html">
          <button class="nav-btn" type="submit"><a>COMMANDS</a></button>
        </form>
        </div>
        <div class="btn-inline-block">
        <form method="get" action="commands.html">
          <button class="nav-btn" type="submit"><a>UPVOTE</a></button>
        </form>
        </div>
      </div>
    </div>
  </body>
</html>

Ответ №3:

Нужно только добавить text-align: center; в div #navbar-wrapper 

 #navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

.nav-btn-add {
  padding-top: 4vh;
  padding-bottom: 4vh;
  padding-left: 4vw;
  padding-right: 4vw;
}

.btn-inline-block {
  display: inline-block;
  text-align: center;
}

.nav-btn {
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  cursor: pointer;
  background-color: transparent;
  color: white;
  transition: .5s;
}

.nav-btn:hover {
  background-color: transparent;
  color: #00C5CD;
  border-color: #00C5CD;
}  
 <div id="navbar-wrapper">
  <div class="url-cnt">
    <div class="btn-block">
      <form method="get" action="">
        <button class="nav-btn-add" type="submit"><a>ADD TO SERVER</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>DISCORD</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>COMMANDS</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>UPVOTE</a></button>
      </form>
    </div>
  </div>
</div>

Ответ №4:

 .center{
  text-align: center;
}

.btn-inline-block {
  display: inline-block;
}



<div class="center">
  <div class="btn-inline-block">
  <form method="get" action="commands.html">
    <button class="nav-btn" type="submit"><a>DISCORD</a></button>
  </form>
  </div>
  <div class="btn-inline-block">
  <form method="get" action="commands.html">
    <button class="nav-btn" type="submit"><a>COMMANDS</a></button>
  </form>
  </div>
  <div class="btn-inline-block">
  <form method="get" action="commands.html">
    <button class="nav-btn" type="submit"><a>UPVOTE</a></button>
  </form>
  </div>
</div>