Question 161284 in Html Question posted in
Some basic documentation can be found here.

How do I center elements in a green box?

How do I keep the input box in the middle?the page looks

This the link to the page oublished using github.
https://tahsinttalha.github.io/fcc-survey-form/

I have tried magin property to center the inout boxes. But in small screen, It’s not working properly. What can I do?

Tags:

3

Answers


  1. 0

    you can use flex to keep elements in the middle of box.like:

    
<div class="box">
  <input />
</div>

    add CSS to the div

    .box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
    Login or Signup to reply.
  2. 0

    Try adding box-sizing: border-box; to the CSS-definition of your input:

    #input-info-section > input,
#dropdown,
textarea {
    width: 100%;
    height: 40px;
    margin: 10px auto;
    border: 2px solid #333333;
    border-radius: 5px;
    padding: 10px;
    background-color: #fff;
    color: #333;
    font-family: "Inter", sans-serif;
    /* add the following line: */
    box-sizing: border-box;
}

    This way, the paddings and borders are calculated with all other measurements and not added after centering the element.

    Login or Signup to reply.
  3. 0

    I suggest to use padding inside the main container, so all the div and block elements will take 100% of the width.

    Just need to put width: 100% to all inputs.

    I made a basic example :

    * {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 500px;
  background: lime;
  border-radius: 10px;
  border: 2px solid black;
  padding: 1rem;
}

.title {
  text-align: center;
  margin-bottom: 1rem;
}

.description {
  margin-bottom: 2rem;
}

.form-input, select-input {
  width: 100%;
  outline: none;
  border: 2px solid black;
  border-radius: 5px;
  height: 40px;
  margin: 1rem 0 ;
  padding: 1rem;
}

.select-input {
  width: 100%;
  height: 40px;
  border: 2px solid black;
  border-radius: 10px;
  margin: 1rem 0;
}
    <div class="container">
    <h1 class="title">
      Personal Survey
    </h1>
    <p class="description">
      This survey is being conducted solely for the purpose of the developement of the website. Your data is safe and secured and we will be disposed of the data after our   analysis is completed. Thank your very much for your time and effort.
    </p>
  <form action="#">
    <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your name">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your email">
        <label for="" class="form-label">
      Name
    </label>
    <input type="text" class="form-input" placeholder="Type your age">
    <div class="select-container">
      <select class="select-input" name="" id="dropdown">        
        <option value="Select">Select your profession type</option>
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
        <option value="">option 4</option>
      </select>
    </div>
  </form>
</div>

    I hope it will helps you 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search