html表格居中代码

html-css010

html表格居中代码,第1张

1、首先打开vscode编辑器,新建一个html文档,里面写入一个外层的div,再加入一行table表格:

2、然后在上方的style标签中加入css样式,设置table标签的样式,table的元素具有长度自适应性,其长度根据其内文本长度决定,只要设置margin属性,让左右设置为auto就回自动分配剩余空间,也就是元素两侧的区域各占50%,那么元素就左右居中了:

3、最后打开浏览器就可以看到居中的一行表格了:

可以用“text-align”属性控制du文字的位置,“center”属性值让文字居中显示。

1、新建html文档,在body标签中添加一个div标签,在div标签中添加p标签,这时文字将会在div标签中靠左显示:

2、为div标签设置“text-align”属性,属性值为“center”,这时文本将会居中显示:

3、想让文本靠右显示,可以为“text-align”属性设置“right”属性值,这时文本将会靠右显示:

表单宽高不固定情况下,表单外面加一个父标签fa  表单加一个类centered

<body>   

<div class="fa">

<form name="search" method="post" action="#" class="centered">

   <input value="请输入关键词" type="text" name="q" />

   <input type="submit" value="搜索"/>

</form>

</div>

</body> 清除页面默认样式后(margin padding)

<style type="text/css"> 

html,body{width: 100%height: 100%}

.fa {text-align: centerheight: 100%}

.fa:before {content: ''display: inline-blockheight: 100%vertical-align: middle}

.centered {display: inline-blockvertical-align: middlebackground: redwidth: auto}

</style>