javascript - 无法将文本居中放置在左侧

Question

好的，我有一个表格。我想要左侧的文本，但表单本身位于我页面的中央。最好不使用边距。 iv 将我所有的 css 以及表单本身和选择按钮的 javascript 放在那里。现在我有一个网站，如果您想测试它以获取有关该问题的更多信息:https://thg-graphics.com/Enquiry.html

它在移动设备上也无法正常工作。选择按钮不想缩小...

我无法在没有文本居中的情况下使表单居中，如果我这样做，似乎在某处我无法准确找到的边距.....

问题:无法将文本居中放置在左侧。选择按钮在移动设备上不起作用。

我的 css 底部控制选择下拉菜单 顶部下拉 css 控制我的菜单下拉菜单，功能很好，但我把它放在那里，以防你需要它。它还使用 w3.css。

虽然表单确实起作用。它使用表单通过电子邮件发送 php 方法向我发送信息。正如我提到的那样，PHP 一切正常，我无法使表单居中，文本位于左侧。

从昨天早上开始，我一直在努力让它正常工作......我被困住了，非常感谢一些帮助:D

/*Select Box js*/
$('.drop-menu').click(function() {
  $(this).attr('tabindex', 1).focus();
  $(this).toggleClass('active');
  $(this).find('.dropeddown').slideToggle(0);
});
$('.drop-menu').focusout(function() {
  $(this).removeClass('active');
  $(this).find('.dropeddown').slideUp(0);
});
$('.drop-menu .dropeddown li').click(function() {
  $(this).parents('.drop-menu').find('span').text($(this).text());
  $(this).parents('.drop-menu').find('input').attr('value', $(this).attr('id'));
});
/*End Select Box js*/


$('.dropeddown li').click(function() {
  var input = '<strong>' + $(this).parents('.drop-menu').find('input').val() + '</strong>',
    msg = '<span class="msg">Hidden input value is ';
  $('.msg').html(msg + input + '</span>');
});

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

div#container {
  position: relative;
  height: auto !important;
  min-height: 100%;
}

div#header {
  padding: 0em;
  position: relative;
  z-index: 2;
}

div#content {}

div#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

body,
h1 {
  font-family: "Raleway", Arial, sans-serif
}

h1 {
  letter-spacing: 6px
}

.border {
  border: 1px solid #c3c3c3;
  display: inline-block;
}

.border2 {
  border: 1.2px solid #c3c3c3;
  display: inline-block;
}

.dropbtn {
  background-color: #FFFFFF;
  color: black;
  padding: 16px;
  font-size: 16px;
  border: thin;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f6f6f6;
  min-width: 230px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #989898;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #ccc;
}

.required {
  color: #FF0004;
  position: absolute;
  display: inline-block;
}

.required2 {
  position: absolute;
}

.error {
  color: #FF0000;
  font-size: 35px;
}

.error2 {
  color: #FF0000;
  font-size: 46px;
}

.input2 {
  margin-top: 5px;
  width: 75%;
  max-width: 400px;
}

.coloursize {
  width: 75%;
  max-width: 400px;
  cursor: pointer;
}

.input3 {
  min-height: 116px;
  min-width: 400px;
}

.center {
  margin-left: 30px;
}

.footer2 {
  width: 100%;
  background-color: #E0E0E0;
}

.button1 {
  width: 100%;
}

.video {
  width: 100%;
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.div {
  margin-left: 57.5%;
  display: none;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  z-index: 1;
  position: absolute;
}

.img:hover+div {
  display: block;
}

.error3 {
  position: absolute;
  z-index: 0;
}

#THG-width {
  padding: 20px;
  width: 70%;
}

@media only screen and (max-width: 480px) {
  #THG-width {
    padding: 20px;
    width: 100%;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding,
  h2 {
    font-size: 28px;
    padding-left: 1vw;
    padding-right: 1vw;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding2 {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}

@media only screen and (max-width: 480px) {
  #THG-padding4 {
    padding-left: 3.5vw;
    padding-right: 3.5vw;
  }
}

.THG-center {
  text-align: center;
}

@media only screen and (max-width: 1100px) {
  #THG-padding3 {
    padding-left: 20%;
  }
}

@media only screen and (max-width: 700px) {
  #THG-padding3 {
    padding-left: 10%;
  }
}

@media only screen and (max-width: 800px) {
  #content {
    padding: 20px;
  }
}

@media only screen and (max-width: 800px) {
  #input3 {
    min-height: 80%;
    min-width: 50%;
  }
}

.box {
  display: inline-table;
  text-align: left;
}

.box3 {
  display: inline-block;
  text-align: left;
  width: 38%;
  margin-left: 10%;
}

.box2 {
  border: 2px solid grey;
  padding: 20px;
}

.padding2 {
  padding-left: 34.5%;
}

.width {
  width: 75%;
  max-width: 400px;
  height: 30px;
  cursor: pointer;
}

.cursor {
  cursor: pointer;
}

.jscolor {
  cursor: pointer;
}


/*Styling Selectbox*/

.drop-menu {
  width: 400px;
  display: inline-block;
  background-color: #fff;
  position: relative;
  font-size: 14px;
  color: #474747;
  text-align: center;
  margin-right: 4px;
}

.drop-menu .select {
  cursor: pointer;
  display: block;
  padding: 10px;
}

.drop-menu .select i {
  font-size: 13px;
  color: #888;
  cursor: pointer;
  float: right;
}

.drop-menu:hover {
  background-color: #ccc;
}

.drop-menu:active {
  background-color: #f8f8f8;
}

.drop-menu.active:hover,
.drop-menu.active {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: #f8f8f8;
}

.drop-menu .dropeddown {
  position: absolute;
  background-color: #fff;
  width: 100%;
  left: 0;
  margin-top: 1px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: none;
  overflow-y: auto;
  z-index: 9;
}

.drop-menu .dropeddown li {
  padding: 10px;
  cursor: pointer;
}

.drop-menu .dropeddown {
  padding: 0;
  list-style: none;
}

.drop-menu .dropeddown li:hover {
  background-color: #ccc;
  color: #00000;
}

.drop-menu .dropeddown li:active {
  background-color: #ccc;
  color: #00000;
}

.middle {
  text-align: left;
  align-content: center;
}

<form action="MailHandlerForm.php" method="post">
  <label>Name:</label>
  <br>
  <input name="name" type="text" class="input2" placeholder="Insert full name" pattern="[a-zA-Z\s0-9]{1,}" required />
  <a class="error required error3">*</a>
  <br>
  <label>Email Address:</label>
  <br>
  <input name="email" type="email" required class="input2" placeholder="Insert Email" value="" />
  <a class="error required error3">*</a>
  <br>
  <label>Please Select 3D or 2D:</label>
  <div>
    <div class="drop-menu">
      <div class="select border2">
        <span>Select</span>
      </div>
      <input type="hidden" name="Type">
      <ul class="dropeddown">
        <li id="Select">Select</li>
        <li id="3D">3D</li>
        <li id="2D">2D</li>
      </ul>
    </div>
  </div>
  Please Select Animated or static:<br>
  <div>
    <div class="drop-menu">
      <div class="select border2">
        <span>Select</span>
      </div>
      <input type="hidden" name="Statis_Animated">
      <ul class="dropeddown">
        <li id="Select">Select</li>
        <li id="Animated">Animated</li>
        <li id="Static">Static</li>
        <li id="Both">Both</li>
      </ul>
    </div>
  </div>
  <label>Text</label>
  <br>
  <input name="text" type="text" class="input2" placeholder="Text on Graphic/animation" value="">
  <br>
  <label>Text Font:</label>
  <br>
  <input name="font" type="text" class="input2 center" placeholder="Insert link(s) for font(s)" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">Please make sure all fonts are free for commercial use.</div>
  <br>
  <label>Font size:</label>
  <br>
  <input name="fontsize" type="text" class="input2" placeholder="Font size(s)" value="">
  <br>
  <label>Text colour:</label>
  <br>
  <input name="textcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Text/Object Bevel Colour:</label>
  <br>
  <input name="textobjectbevelcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Background:</label>
  <br>
  <input name="background" type="text" class="input2" placeholder="Background(s)" value="">
  <br>
  <label>Background colour:</label>
  <br>
  <input name="backgroundcolour" class="coloursize jscolor {closable:true,closeText:'Close!'}" style="width: 75%;" value="FF0000">
  <br>
  <label>Effects:</label>
  <br>
  <input name="effects" type="text" class="input2 center" placeholder="Effects" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">i.e Chrome, Shiny, Reflective, Glossy, etc.</div>
  <br>
  <label>Reference inspiration image(s)</label>
  <br>
  <input name="references" type="text" class="input2 center" placeholder="Insert reference link(s)" value="">
  <sub class="img"><img src="Images/help.png"></sub>
  <div class="div">To help the designer get a better understanding of your enquiry.</div>
  <br>
  <label>Additional Information:</label>
  <br>
  <textarea name="additional_information" cols="30" rows="5" class="input2 input3 center" id="input3" placeholder="Type here" title="Resizable Text Box"></textarea>
  <sup class="img"><img src="Images/help.png"></sup>
  <div class="div">For specific information. i.e I would like a yellow star in the top right.</div>


  <br>
  <div>
    <input type="hidden" class="checkbox" name="checkbox" value="no" required />
    <input type="checkbox" class="checkbox" id="checkbox" name="checkbox" value="yes" required />
    <label for="checkbox">I have read & accepted the <a title="Privacy Policy" href="privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> &amp; <a title="Terms of use" href="TOS.html" class="w3-hover-text-blue">Terms of use</a></label>
    <a class="error2 required error3"><sup>*</sup></a>
  </div>
  <div class="w3-border w3-bar" style="width:75%; max-width:400px">
    <input class="w3-button button1" type="submit" value="Submit">
  </div>
</form>
<p>By submitting this obligation free enquiry&nbsp;you are agreeing to our <a title="Privacy Policy" href="privacypolicy.html" class="w3-hover-text-blue">Privacy Policy</a> &amp; <a title="Terms of use" href="TOS.html" class="w3-hover-text-blue">Terms of use</a>.
  <br> All information subbmitted will be kept confidential &amp; will <strong>NOT</strong> be made public.</p>
</div>

Answer 1

在引用站点上，表单元素从父容器继承 text-align:center。请尝试将表单内容包含在 div 中以解决文本对齐和居中问题。

<form>
  <div style="text-align:left;width: 450px;margin: 0 auto 0 auto;">
    ... my form ...
  </div>
</form>