给表格添加align=center居中无效

给表格添加align=center居中无效

如题,给表格添加align=center居中无效!http://img1.sycdn.imooc.com//climg/5b0568030001111328000868.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

4回答
好帮手慕夭夭 2018-05-25 14:21:05

经过测试 , 练习题问题与建议如下:

1.去掉整体div的宽度

http://img1.sycdn.imooc.com//climg/5b07a83f0001ad7f01930091.jpg

然后再给标题和表格分别设置居中:

http://img1.sycdn.imooc.com//climg/5b07a8c200014e8604140105.jpg

http://img1.sycdn.imooc.com//climg/5b07a8840001aee106480055.jpg

表单和标题在浏览器中就可以居中了,如下:

http://img1.sycdn.imooc.com//climg/5b07a8e10001447014310558.jpg

2.align是标签的属性 ,所以align="center"是直接写在标签中的 . text-align: center 是css样式 ,所以要写在样式表中或者在标签中写在style属性里面 . 

3.bgcolor也是标签中的属性 , 所以要写在标签中 .如果要在样式表中设置背景色 , 需要使用css样式background-color 哦

 自己理解并动手实战一下吧 ,祝学习愉快 !

  • 提问者 haledai #1
    后来又检查了一遍是因为外部样式文件中写了*「margin:0」,很奇怪这个为什么会导致表格不居中!
    2018-05-28 21:37:27
  • 好帮手慕夭夭 回复 提问者 haledai #2
    *{margin:0}是给所有的元素初始化样式 ,表示元素的边距为0 . align="center"主要是针对文本内容居中的 , 所以设置margin:0之后table会受到影响没有居中显示哦 . 自己理解一下哦
    2018-05-29 09:52:45
提问者 haledai 2018-05-24 23:13:30

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Form</title>

<link rel="shortcut icon" type="image/x-icon" href="image/logo.ico">

<link rel="stylesheet" type="text/css" href="css/base.css">

<style>

.wrap{

width: 800px;

color: #323261;

}

.title h1{

padding: 80px 0 30px;

border-bottom: 1px solid #dcdcdc;

}

.form{

margin-top: 20px;

}

</style>

</head>

<body>

<div class="wrap center-block">

<div class="title">

<h1 class="text-center">注册表单</h1>

</div>

<form class="form">

<table width="600px" border="1" bgcolor="#f2f2f2">

<tr>

<td>姓名:</td>

<td><input type="text" name="username" size="40" maxlength="10" placeholder="请输入姓名" /></td>

</tr>

<tr>

<td>邮箱:</td>

<td><input type="text" name="email" size="40" value="@foxmail.com" /></td>

</tr>

<tr>

<td>密码:</td>

<td><input type="password" name="password" size="40" maxlength="6" placeholder="请输入密码" /></td>

</tr>

<tr>

<td>确认密码:</td>

<td><input type="password" name="password" size="40" maxlength="6" placeholder="请再次输入密码" /></td>

</tr>

<tr>

<td>上传照片:</td>

<td><input type="file" name="file" size="40"/></td>

</tr>

<tr>

<td>性别:</td>

<td>

<input type="radio" name="sex" value="man" checked="" />男

<input type="radio" name="sex" value="woman" />女

</td>

</tr>

<tr>

<td>爱好:</td>

<td>

<input type="checkbox" name="check1" value="basketball" />篮球

<input type="checkbox" name="check1" value="run" />跑步

<input type="checkbox" name="check1" value="swimming" />游泳

<input type="checkbox" name="check1" value="clim" />登山

</td>

</tr>

<tr>

<td>城市:</td>

<td>

<select name="city">

<optgroup label="华南">

<option value="xz">请选择</option>

<option value="sh">上海</option>

<option value="gz">广州</option>

<option value="hz">杭州</option>

<option value="wh">武汉</option>

</optgroup>

<optgroup label="华北">

<option value="nj">南京</option>

<option value="sz">深圳</option>

<option value="hf">合肥</option>

<option value="xa">西安</option>

<option value="zz">郑州</option>

</optgroup>

</select>

</td>

</tr>

<tr>

<td></td>

<td>

<input type="button" name="button" value="点击">

<input type="submit" name="submit" value="提交">

<input type="reset" name="reset" value="重置">

<input type="image" name="imagebtn" src="image/btn.png">

</td>

</tr>

</table>

</form>


</div>


</body>

</html>


以上是我写的,有三个疑问:

1/在table标签加了“align=center”,为什么表格没有和教程里的一样居中?

2/<td style="text-align: center;">text</td>和<td>7k</td>

两种样式都能让单元格的文案居中,这两种有什么区别,align=“center”是不是只能用在表格元素中,且不能在外部样式文件中使用?

3/bgcolor=“#fff”,这个是不是也是表格元素专有的,在外部样式文件中无效?


卡布琦诺 2018-05-24 11:08:53

建议你把代码贴上来哦,以便于大家更加准确的定位你的问题并帮你解答,祝学习愉快!

慕UI2398482 2018-05-23 21:35:37

是不是因为table是块状元素,试试在style设置align=“center”

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师