HTML 中心输入按钮

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10793604/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:41:10  来源:igfitidea点击:

HTML center input buttons

htmlcss

提问by user1383147

Here is my code:

这是我的代码:

        <p align="center">Do you want to play the game?</p><br>
        <Input type = 'Submit' Name ='StartQuiz' value="Yes" align="center">
        <Input type = 'Submit' Name ='LogOut' value="No" align="center">

The buttons are not in the center. Do I have to use CSS for this? I read on the net to just use the simple align tag.

按钮不在中间。我必须为此使用 CSS 吗?我在网上阅读只是使用简单的对齐标签。

How should I go about aligning these buttons to the center?

我应该如何将这些按钮与中心对齐?

回答by Fiambre

Align is deprecated on HTML5, so considered use CSS3 instead. The align attributte is to center the content and not the element itself.

HTML5 不推荐使用 Align,因此考虑使用 CSS3。align 属性是使内容居中,而不是元素本身。

The input element is inline-block by default, so, to center you need to put them inside a div as here:

默认情况下,输入元素是内联块,因此,要居中,您需要将它们放在 div 中,如下所示:

<div style="text-align:center;">
    <input type="text" />
</div>

This is cause the inline-block elements share the same line with other elements and you need to center all elements that share the same line. The div element is a block element that display alone in one line.

这是因为 inline-block 元素与其他元素共享同一行,您需要将共享同一行的所有元素居中。div 元素是一个单独显示在一行中的块元素。

So you have another option to center an input, and you can set to "display:block;" as here:

所以你有另一个选项来居中输入,你可以设置为“display:block;” 如这里:

<input type="text" style="margin:0px auto; display:block;" />

See: http://jsfiddle.net/T4f3W/

见:http: //jsfiddle.net/T4f3W/

回答by MusikAnimal

You should be using CSS for such styling. Rid of the HTML align attributes, add a wrapper, and center the text. Also note that the <center>tag and certain uses of align=centerare deprecated as of HTML5.

您应该将 CSS 用于此类样式。去掉 HTML 的对齐属性,添加一个包装器,并使文本居中。另请注意,从HTML5 开始<center>align=center不推荐使用的标记和某些用途。

<div>
    <p>Do you want to play the game?</p><br>
    <input type="submit" name="StartQuiz" value="Yes">
    <input type="submit" name="LogOut" value="No">
</div>

And for your CSS:

对于您的 CSS:

div
{
    text-align: center;
}?

回答by Rohit Azad

Define one div parent and give to text-align centerin your css .

定义一个 div 父级并text-align center在您的 css 中提供。

Hi Check to live demo http://jsfiddle.net/vdUEZ/

嗨检查现场演示http://jsfiddle.net/vdUEZ/



Remove p tag align centerand give to one div

删除p tag align center并给一个 div

Updated Live demohttp://jsfiddle.net/vdUEZ/1/

更新现场演示http://jsfiddle.net/vdUEZ/1/

回答by Exor

<p align="center">Do you want to play the game?</p><br>
<div style="text-align: center">
        <Input type = 'Submit' Name ='StartQuiz' value="Yes"  align="center">
        <Input type = 'Submit' Name ='LogOut' value="No" align="center">
</div>

回答by Asaph

Your strategy should work if you move the <input>tags inside the the <p>tag and remove the deprecated alignattributes in the <input>tags. Even if you were to use the alignattribute in an <input>tag, the correct value would be "middle", not "center". Try this code:

如果您将<input>标签移动到标签内<p>并删除标签中已弃用的align属性,则您的策略应该有效<input>。即使您要align<input>标签中使用该属性,正确的值也应该是"middle",而不是"center"。试试这个代码:

<p align="center">Do you want to play the game?<br>
    <Input type = 'Submit' Name ='StartQuiz' value="Yes">
    <Input type = 'Submit' Name ='LogOut' value="No">
</p>

It's also possible (preferred, actually) to use CSS for centering.

也可以(实际上是首选)使用 CSS 进行居中。

回答by theliberalsurfer

chuck the inputs inside a <center>tag. check out the live demo http://jsfiddle.net/xA2kS/

将输入夹在<center>标签内。查看现场演示http://jsfiddle.net/xA2kS/