居中表格

时间：2019-01-12 18:00:08

标签： html css

我正在尝试将表单居中放置在页面中间。目前，我正在使用div并将表单放在其中。 div居中但不在div内。这是我的HTML和CSS的一部分。

    form {
    margin: auto;
    }

     .wrapper {
    margin: auto;
    width: 50%;
    padding: 0px;
    display: table;
    }


    fieldset {

    margin: 1em;
    padding: 1em;
    border-color: crimson;
    border-radius: 20px;
    border-style: double;
    border-width: 10px;
    width: 70%;
    }
 <div class="wrapper">
        <form id="form1">
            <fieldset>
                <legend>Your contact details</legend>
                <p class="formtext">Name <em>(required)</em></p>
                <input type="text" id="name" required placeholder="Forname & Surname" />
                <p class="formtext">Email Address <em>(required)</em></p>
                <input type="text" id="email" required placeholder="example@example.com" />
                <p class="formtext">Website Address</p>
                <input type="text" id="url" placeholder="https:www.example.com" />
                <p class="formtext">Message</p>
                <textarea id="message" required></textarea>
                <p class="formtext">Would you like to recieve regular email updates?</p>
                <select name="cars">
                    <option value="yes">Yes</option>
                    <option value="no">No</option>

                </select>

            </fieldset>
            <fieldset>
                <legend>Would you like more information?</legend>
                <label class="button" for="information-yes">
                    <input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
                <label class="button" for="information-no">
                    <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
            </fieldset>
            <input type="submit" value="Click to send" />
        </form>
    </div>

4 个答案:

答案 0 :(得分：1)

将text-align: center;添加到表单标签

form {
  margin: auto;
  text-align: center;
}
.wrapper {
  margin: auto;
  width: 50%;
  padding: 0px;
  display: table;
}

fieldset {
  margin: 1em;
  padding: 1em;
  border-color: crimson;
  border-radius: 20px;
  border-style: double;
  border-width: 10px;
  width: 70%;
}
<div class="wrapper">
  <form id="form1">
    <fieldset>
      <legend>Your contact details</legend>
      <p class="formtext">Name <em>(required)</em></p>
      <input type="text" id="name" required placeholder="Forname & Surname">
      <p class="formtext">Email Address <em>(required)</em></p>
      <input type="text" id="email" required placeholder="example@example.com">
      <p class="formtext">Website Address</p>
      <input type="text" id="url" placeholder="https:www.example.com">
      <p class="formtext">Message</p>
      <textarea id="message" required></textarea>
      <p class="formtext">Would you like to recieve regular email updates?</p>
      <select name="cars">
        <option value="yes">Yes</option>
        <option value="no">No</option>
      </select>
    </fieldset>
    <fieldset>
      <legend>Would you like more information?</legend>
      <label class="button" for="information-yes">
        <input type="checkbox" id="information-yes" name="information" value="yes">Yes please</label>
        <label class="button" for="information-no">
          <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
    </fieldset>
    <input type="submit" value="Click to send" />
  </form>
</div>

答案 1 :(得分：0)

<form>占用父div的宽度和高度，因此当div居中时，其内部的<form>也居中。现在面临着将内容置于<form>内部的挑战。为此，请检查我的解决方案。

HTML 

 <div class="wrapper">
    <form id="form1">
        <fieldset>
            <legend>Your contact details</legend>
            <div class="form-center">
            <p class="formtext">Name <em>(required)</em></p>
            <input type="text" id="name" required placeholder="Forname & Surname" />
            <p class="formtext">Email Address <em>(required)</em></p>
            <input type="text" id="email" required placeholder="example@example.com" />
            <p class="formtext">Website Address</p>
            <input type="text" id="url" placeholder="https:www.example.com" />
            <p class="formtext">Message</p>
            <textarea id="message" required></textarea>
            <p class="formtext">Would you like to recieve regular email updates?</p>
            <select name="cars">
                <option value="yes">Yes</option>
                <option value="no">No</option>

            </select>
</div>
        </fieldset>
        <fieldset>
            <legend>Would you like more information?</legend>
          <div class="form-center">
            <label class="button" for="information-yes">
                <input type="checkbox" id="information-yes" name="information" value="yes" />Yes please</label>
            <label class="button" for="information-no">
                <input type="checkbox" id="information-no" name="information" value="no" checked />No thanks</label>
          </div>
        </fieldset>
        <input type="submit" value="Click to send" />
    </form>
</div>

CSS 

form {
  margin:auto;
}

div.form-center {
  width: 60%;
    margin-left: auto;
    margin-right: auto;
}

 .wrapper {
margin: auto;
width: 50%;
padding: 0px;
display: table;
}


fieldset {

margin: 1em;
padding: 1em;
border-color: crimson;
border-radius: 20px;
border-style: double;
border-width: 10px;
width: 70%;
}

答案 2 :(得分：0)

您可能要使用Flexbox。

在字段集选择器上，添加以下三行代码：

display: flex;
flex-direction: column;
align-items: center;

此外，在字段集选择器上，使用margin：1em自动代替margin：1em。这将使marginset 1em在fieldset元素的顶部和底部，但会将元素定位在其<form>父级内部的中央。

您的示例将保持不变，仅对于字段集选择器，您具有以下css属性：

fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1em auto;
    padding: 1em;
    border-color: crimson;
    border-radius: 20px;
    border-style: double;
    border-width: 10px;
    width: 70%;
}

编辑：<fieldset>元素上的Flexbox仅在Firefox 64+上受支持，Chrome尚不支持。我在发布和测试后发现了这一点，以查看它是否可以在Chrome中正常运行，因为我仅在发布前在Firefox上对其进行了测试。可以在此thread中找到有关flexbox和<fieldset>元素的更多信息。

答案 3 :(得分：0)

form {
    /*margin: auto; Not required as long as you didn't specify the width of the form*/ 
    text-align: center;
}
fieldset {
    /*centering the fieldset horizontally*/ 
    margin: 1em auto;
    ...
}
相关问题
最新问题