Кнопка не будет располагаться по центру в середине раздела

ProgramBox

Кнопка не будет располагаться по центру в середине раздела

Post author:admin
Запись опубликована:22 марта, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я не могу получить .btn-вычислить по центру в середине раздела под моей формой. Кажется, что никакой стиль позиции не имеет никакого эффекта. Не уверен, что происходит не так.

P.S Я еще не сделал ее адаптивной, поэтому она выглядит не очень красиво, если не просматривается в полном браузере, но вы можете видеть, что кнопка не переместится в центр, что бы вы ни пытались.

 /* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input: label {
    color: white;
}

input {
    text-indent: 10px;
}


.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 20rem;
    text-align: center;
}

.thebutton {
    margin-top: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

 <html>
<head>
</head>
<body>
  <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input type="email" placeholder="Email" class="home-email-footer" id="input" required name="_replyto">
                </div>

                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <a href="" class="btn-calc">Calculate Payment</a>
                
                </form>

            </div>
       </div>
   </section>
</body>
</html>

1. Вы могли бы сделать width: 100% на class="thebutton" .

2. Это сработало. Почему это сработало? Спасибо

3. Вы пытались использовать центр для элемента flex, но родительский элемент не имел ширины, только той же ширины, что и кнопка. Итак, вам нужно было придать родительскому контейнеру ширину, чтобы flex поместил кнопку в центр этого родительского div.

4. Легенда. Спасибо за объяснение

Ответ №1:

Вы можете добавить margin-left: auto; margin-right: auto к class="thebutton" , который выровняет anchor элемент, который действует как кнопка в центре

 .survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input: label {
    color: white;
}

input {
    text-indent: 10px;
}


.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 20rem;
    text-align: center;
}

.thebutton {
    margin-top: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

 <section class="survery">
  <div class="survery-title">
    <h1 class="survery-h1">Scrappage Payment Survey</h1>
  </div>
  <form action="">
    <div class="survery-questions">
      <div class="name-form">
        <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>

      </div>

      <div class="phone-form">
        <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
      </div>

      <div class="email-form">
        <input type="email" placeholder="Email" class="home-email-footer" id="input" required name="_replyto">
      </div>

      <div class="phone-form">
        <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
      </div>

      <div class="name-form">
        <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>

      </div>

      <div class="phone-form">
        <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
      </div>

      <div class="name-form">
        <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>

      </div>

      <div class="phone-form">
        <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
      </div>
      <div class="thebutton">
        <a href="" class="btn-calc">Calculate Payment</a>

  </form>

  </div>
  </div>
</section>

Ответ №2:

Это должно помочь вашей цели. Работает простое добавление width:100% и display:flex в .theButton .

 /* Survery Section Start */

.survery {
    background-color: #1b262c;
    padding-bottom: 100px;
}

.survery-h1 {
    color: white;
    text-align: center;
    padding-top: 5rem;
}

input: label {
    color: white;
}

input {
    text-indent: 10px;
}


.survery-questions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.home-name-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

.home-phone-footer {
    height: 45px;
    margin-bottom: 3em;
    width: 600px;
    margin-left: 25px;
}

.home-email-footer {
    width: 600px;
    height: 45px;
    margin-bottom: 3em;
    margin-left: 90px;
    margin-right: 25px;
}

#input {
    background: #ffffff;
    border: 1px solid #eaeaea;
}

.btn-calc {
    padding: 1rem 2.5rem;
    width: 15rem;
    background-color: #168ecf;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 900;
    color: #eee;
    transition: all .5s;
    margin-bottom: 3rem;
    margin-top: 20rem;
    text-align: center;
}

.thebutton {
    margin-top: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
display: flex
}

 <head>
</head>
<body>
  <!-- Survery Start -->
   <section class="survery">
       <div class="survery-title">
           <h1 class="survery-h1">Scrappage Payment Survey</h1>
       </div>
        <form action="">
        <div class="survery-questions">
                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>
                
                <div class="email-form">
                    <input type="email" placeholder="Email" class="home-email-footer" id="input" required name="_replyto">
                </div>

                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>

                <div class="name-form">
                    <input name="name" type="text" placeholder="Name" class="home-name-footer" id="input" required>
                
                </div>
                
                <div class="phone-form">
                    <input name="phone" type="text" placeholder="Phone" class="home-phone-footer" id="input" required>
                </div>
                <div class="thebutton">
                    <a href="" class="btn-calc">Calculate Payment</a>
                
                </form>

            </div>
       </div>
   </section>
</body>
</html>

1. прокомментировал ли это justDan какую-либо разницу?

2. Я также попытался добавить display: flex для лучшего удобства использования, и я еще был в режиме редактирования кода, я только что закончил @RayeesAC

3. пожалуйста, обратите внимание на свойство display: flex, объединенное с width: 100%, чтобы использовать атрибуты, связанные с flex, такие как justify-content и т. Д. @TannerDolby

4. пожалуйста, обратите внимание на свойство display: flex, объединенное с width: 100%, чтобы использовать атрибуты, связанные с flex, такие как justify-content и т. Д. @RayeesAC

5. Не могли бы вы, пожалуйста, добавить разницу в ответ в качестве описания. для большей ясности. Спасибо 🙂