HTML中如何让控件居中

HTML中如何让控件居中,第1张

设置display: inline-block再给父级添加text-align: center

设置display: flex(这里是父级,让子级对齐);

利用定位+transform: translate(-50%, -50%)

margin: 0 auto这个对设置了宽度的模型有效(设置为100%不行)

html中设置按钮的位置:

解决方案一:

如果是绝对定位,可以设置left,还可通过margin,padding等;

" style="box-sizing: border-boxmargin: 0pxpadding: 0pxfont-family: Menlo, Monaco, Consolas, "Courier New", monospacecolor: rgb(51, 51, 51)font-size: 18.6773pxfont-style: normalfont-variant-ligatures: normalfont-variant-caps: normalfont-weight: normalletter-spacing: normalorphans: 2text-align: starttext-indent: 0pxtext-transform: nonewidows: 2word-spacing: 0px-webkit-text-stroke-width: 0pxbackground-color: rgb(255, 255, 255)"><td style="padding-right:30px"><input type="submit" value="注册"><input type="reset" value="重置"></td></tr>

解决方案二:

如果是绝对定位,可以设置left,还可通过margin,padding等。

参考资料

阿里云.阿里云[引用时间2018-1-9]

<head>

<style type="text/css">

td {

text-align:center/*设置水平居中*/

vertical-align:middle/*设置垂直居中*/

}

</style>

</head>

<body>

<table border="1" cellspacing="0" width="800px" height="190px">

<tr>

<td>monday</td>

<td>tuesday</td>

<td>wednesday</td>

</tr>

<tr>

<td>thursday</td>

<td>friday</td>

<td>satarday</td>

</tr>

<tr>

<td>sunday</td>

<td>friday</td>

<td>satarday</td>

</tr>

</table>

</body>

说明:如果要在css中控制<td>标签中的文字垂直居中,那么可以设置td标签选择器下的属性:vertical-align这个属性有三个值:top ,bottom,middle 其中,middle属性值代表垂直居中。

代码:td {

vertical-align:middle

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7539157.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存