爲什麼我的HTML文本框不能在移動設備和桌面上集中顯示？

出於某種原因，我的HTML文本框不居中。當我在桌面和移動設備上查看它們時，它們顯示的方式都不一樣。一個拉伸而另一個不居中。何我可以做到這一點，以便我的HTML代碼在這兩種情況下顯示相同？爲什麼我的HTML文本框不能在移動設備和桌面上集中顯示？

<body> 
 

 
    <div id="worked"></div> 
 
    <h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1> 
 
    <h1 id="time" style="text-align: center;"></h1> 
 
    <p>&nbsp;</p> 
 
    <!-- AWeber Web Form Generator 3.0.1 --> 
 
    <form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post"> 
 
<div style="display: none;"> 
 
    <input name="meta_web_form_id" type="hidden" value="604218668" /> 
 
    <input name="meta_split_id" type="hidden" value="" /> 
 
    <input name="listname" type="hidden" value="awlist4661276" /> 
 
    <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" 
 
     name="redirect" 
 
     type="hidden" 
 
     value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> 
 
    <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> 
 
    <input name="meta_message" type="hidden" value="1" /> 
 
    <input name="meta_required" type="hidden" value="name,email" /> 
 
    <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /> 
 
</div> 
 
<div id="af-form-604218668" class="af-form"> 
 
    <div id="af-body-604218668" class="af-body af-standards"> 
 
    <div class="af-element"> 
 
     <label class="previewLabel" for="awf_field-90534028"></label> 
 
     <div class="af-textWrap" style="text-align: left;"> 
 
     <input id="awf_field-90534028" 
 
       class="text" 
 
       style="width: 450px; position: center;" 
 
       tabindex="500" 
 
       name="name" 
 
       type="text" 
 
       value="First Name..." /> 
 
     </div> 
 
    </div> 
 
    <div class="af-element" style="text-align: center;"> 
 
     <label class="previewLabel" for="awf_field-90534029"></label> 
 
     <div class="af-textWrap" style="text-align: left;"> 
 
     <input id="awf_field-90534029" 
 
       class="text" 
 
       style="width: 450px; position: center;" 
 
       tabindex="500" 
 
       name="email" 
 
       type="text" 
 
       value="Best Email..." /> 
 
     </div> 
 
    </div> 
 
    <div class="af-element buttonContainer" style="text-align: center;"> 
 
     <input id="af-submit-image-604218668" 
 
      class="image" 
 
      style="background: none; max-width: 100%; width: 450px position: center;" 
 
      tabindex="502" 
 
      alt="Submit Form" 
 
      name="submit" 
 
      src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" 
 
      type="image" /> 
 
    </div> 
 
    <div class="af-element privacyPolicy" style="text-align: center;"> 
 
     <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p> 
 
     <div class="af-clear">&nbsp;</div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div> 
 
    </form> 
 
    <!-- /AWeber Web Form Generator 3.0.1 --> 
 

 
</body> 
 

 
<script> 
 
    var handler = function() { 
 
if (--sec < 0) { 
 
    sec = 59; 
 
    if (--min < 0) { 
 
    min = 0; 
 
    sec = 0; 
 
    } 
 
} 
 
var min1 = "0" + min + "m"; 
 
var min2 = min + "m"; 
 
var sec1 = "0" + sec + "s"; 
 
var sec2 = sec + "s"; 
 
var col = ":"; 
 
min1 = min1.fontcolor("red"); 
 
min2 = min2.fontcolor("red"); 
 
sec1 = sec1.fontcolor("red"); 
 
sec2 = sec2.fontcolor("red"); 
 
col = col.fontcolor("red"); 
 
document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); 
 
    }; 
 
    var sec = 0; 
 
    var min = 15; 
 
    handler(); 
 
    setInterval(handler, 1000); 
 

 
</script>

來源

2017-05-05 Wizard7611

有作爲'位置沒有這樣的事：center'在CSS。請參閱[文檔]（https://developer.mozilla.org/en-US/docs/Web/CSS/position？v = control）。此外，你有一個div元素中的文本框'style =「text-align：left」'，所以它們對齊...向左。 –

什麼文本框你在說什麼？

如果你在談論兩個輸入元素，那麼爲什麼你在包裝div文本對齊：左？如果你想它居中，包含元素必須與中心對齊。

如果您希望輸入內部的文本居中，您必須在輸入樣式中放置文本align：center，而位置：center不存在於CSS中。（在「名」示例文本對齊：中心）

<body> 
 
    <div id="worked"></div> 
 
    <h1 style="text-align: center;"> 
 
<span style="color: #ff0000;"><strong>Offer Ends In:</strong></span> 
 
    </h1> 
 
    <h1 id="time" style="text-align: center;"></h1> 
 
    <p>&nbsp;</p> 
 
    <!-- AWeber Web Form Generator 3.0.1 --> 
 
    <form class="af-form-wrapper" accept-charset="UTF-8" action="https://www.aweber.com/scripts/addlead.pl" method="post"> 
 
<div style="display: none;"> 
 
    <input name="meta_web_form_id" type="hidden" value="604218668" /> 
 
    <input name="meta_split_id" type="hidden" value="" /> 
 
    <input name="listname" type="hidden" value="awlist4661276" /> 
 
    <input id="redirect_56ab2ff33416d920a3c24dc4d8e140f4" 
 
    name="redirect" 
 
    type="hidden" 
 
    value="http://bloggingnetworkonline.com/InternetMarketing/?page_id=133&amp;preview=true" /> 
 
    <input name="meta_adtracking" type="hidden" value="My_Web_Form" /> 
 
    <input name="meta_message" type="hidden" value="1" /> 
 
    <input name="meta_required" type="hidden" value="name,email" /> 
 
    <input name="meta_tooltip" type="hidden" value="name||First Name...,,email||Best Email..." /> 
 
</div> 
 
<div id="af-form-604218668" class="af-form"> 
 
    <div id="af-body-604218668" class="af-body af-standards"> 
 
<div class="af-element"> 
 
    <label class="previewLabel" for="awf_field-90534028"></label> 
 
    <div class="af-textWrap" style="text-align: center;"> 
 
    <input id="awf_field-90534028" 
 
      class="text" 
 
      style="width: 450px; text-align: center;" 
 
      tabindex="500" 
 
      name="name" 
 
      type="text" 
 
      value="First Name..." /> 
 
    </div> 
 
</div> 
 
<div class="af-element" style="text-align: center;"> 
 
    <label class="previewLabel" for="awf_field-90534029"></label> 
 
    <div class="af-textWrap" style="text-align: center;"> 
 
    <input id="awf_field-90534029" 
 
      class="text" 
 
      style="width: 450px; position: center;" 
 
      tabindex="500" 
 
      name="email" 
 
      type="text" 
 
      value="Best Email..." /> 
 
    </div> 
 
</div> 
 
<div class="af-element buttonContainer" style="text-align: center;"> 
 
    <input id="af-submit-image-604218668" 
 
     class="image" 
 
     style="background: none; max-width: 100%; width: 450px position: center;" 
 
     tabindex="502" 
 
     alt="Submit Form" 
 
     name="submit" 
 
     src="https://hostedimages-cdn.aweber-static.com/MTE0ODQyNQ==/original/d316599087b84f9498e3854009bdad52.png" 
 
     type="image" /> 
 
</div> 
 
<div class="af-element privacyPolicy" style="text-align: center;"> 
 
    <p><strong>I respect your <a title="Privacy Policy" href="https://www.aweber.com/permission.htm" target="_blank" rel="nofollow">email privacy</a></strong></p> 
 
    <div class="af-clear">&nbsp;</div> 
 
</div> 
 
    </div> 
 
</div> 
 
<div style="display: none;"><img src="https://forms.aweber.com/form/displays.htm?id=bAwsTIwcbGwc" alt="" /></div> 
 
    </form> 
 
    <!-- /AWeber Web Form Generator 3.0.1 --> 
 
</body> 
 

 
<script> 
 
    var handler = function() { 
 
if (--sec < 0) { 
 
    sec = 59; 
 
    if (--min < 0) { 
 
    min = 0; 
 
    sec = 0; 
 
    } 
 
} 
 
var min1 = "0" + min + "m"; 
 
var min2 = min + "m"; 
 
var sec1 = "0" + sec + "s"; 
 
var sec2 = sec + "s"; 
 
var col = ":"; 
 
min1 = min1.fontcolor("red"); 
 
min2 = min2.fontcolor("red"); 
 
sec1 = sec1.fontcolor("red"); 
 
sec2 = sec2.fontcolor("red"); 
 
col = col.fontcolor("red"); 
 
document.getElementById("time").innerHTML = (min < 10 ? min1 : min2) + col + (sec < 10 ? sec1 : sec2); 
 
    }; 
 
    var sec = 0; 
 
    var min = 15; 
 
    handler(); 
 
    setInterval(handler, 1000); 
 

 
</script>

來源

2017-05-05 21:37:51

爲什麼我的HTML文本框不能在移動設備和桌面上集中顯示？

回答

相關問題