为什么我的HTML文本框没有居中显示在移动设备和台式机上？ [英] Why aren't my HTML text boxes centered to show up the same on mobile devices and desktops?
本文介绍了为什么我的HTML文本框没有居中显示在移动设备和台式机上？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
由于某种原因，我的HTML文本框未居中。当我在台式机和移动设备上查看它们时，它们的显示方式会有所不同。一个拉伸，而另一个不居中。我该怎么做，以使我的HTML代码在
两种情况下都显示相同？
For some reason, my HTML text boxes are not centering. When I view them both on my desktop and on my mobile device, they show up differently. One is stretched while the other isn't centered. Ho can I make it so that my HTML code shows up the same in both cases?
<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> </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&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"> </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>
推荐答案
您在说什么文本框？
如果您在谈论两个输入元素，那么为什么要包装div text-align：还可以吗？如果要使其居中，则包含元素必须与中心对齐。
If you are talking about the two input elements so why do you have on the wrapping div text-align: left? if you want it centered the containing element must be aligned to the center.
如果要使输入内的文本居中，则必须将text-align：居中输入样式，位置：center在CSS中不存在。 （例如，第一个名字用于文本对齐：居中）
If you want the text inside the input to be centered you must put text-align: center in the input style, the position: center does not exist in css. (Example on "First Name" for text-align: center)
<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> </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&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"> </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>
这篇关于为什么我的HTML文本框没有居中显示在移动设备和台式机上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
