[已解决]【小白求教】关于html中设置居中的问题

Danmoits

首先是图片的居中，我试了几次以后是这样处理的：

<p2 style="text-align: center;">

<style>
.aaa{
    margin:0px;
}
</style>
<!--不知道为什么，必须要创建一个块（哪怕什么内容都没有），和style"text-align:center"搭配才能实现图片的居中-->

<div class="aaa">
<br />
<h1>Section 1 升学宴</h1>
<img border="2" src="picture/QQ图片20200915205844.jpg" alt="五人合照" width="800" height="600" />
<br />
<p3>以上共五人，分别是</p3>
</div>

<br />
</p2>

这样做图片就可以在页面中间显示。

对于表格，我如法炮制：

<p555 style="text-align: center;">
<style>
.ccc{
    margin:0px;
    }
</style>

<div class="ccc">
<table border="2" cellpadding="10">                  
    <caption><p5ii><a name="C2">淡漠的个人信息 </a></caption>
    <tr background="picture/神千2.jpg">
        <th>姓名</th>
            <td>淡漠
    </tr>
    <tr background="picture/神千2.jpg">
        <th>ID</th>
            <td>Danmoits</td>
    </tr>

    <tr>
        <th rowspan="2" bgcolor="gold">目前的学习计划</th>
            <td background="picture/神千2.jpg">日语学到N2以上</td>
    </tr>
    <tr background="picture/神千2.jpg">
        <td>成为联创/冰岩/Dian的正式队员</td>
    </tr>

</table>

<br /><br /><br />

<table border="2" cellpadding="70" background="picture/神千2.jpg">
    <caption>淡漠的其他兴趣爱好</caption>
    <tr>
        <td>吹口琴</td>
        <td>做视频</td>
        <td>玩游戏</td>
        <td>品美食</td>
    </tr>
</table>
</div>

</p555>

结果表格没有居中显示。

两个问题，第一，为什么我只用div或者只用text-align=center不能实现图片居中，两个都用才可以？
第二，表格如何实现居中?为什么我如法炮制得不到图片的那个效果？

希望能给一点演示代码，不要复制粘贴，谢谢！！！尽量只用html，实在不行了来一点CSS也可以。

最佳答案

月排行榜 / 总排行榜

本子兮

2020-10-6 19:20:14

关于问题一：html元素按排列方式分为：行内元素、块元素、行内块元素，三者默认的占用空间不同，排列方式也不同，<img>是行内块元素,自身占用空间仅图片大小，<div>是块元素，占一整行，此外，text-align:center 只能对父元素设置才能生效；
关于问题二：如果只有表格的话，表格居中属性，<table align="center">
建议你先了解一下html标签种类与css排版方式，再思考样式比较好一点

跳转到最佳答案楼层

kogawananari

img标签设置display block

不二如是

宽高的样式生效是有区别的！

最基础的元素分为：行内元素和块级元素。

宽高和居中属性对块级元素生效，<a> 标签属于行内无法生效。

可以通过 display 属性来改变行内和块级的定义。

超过光速c

其实你的这个代码还是存在很多的问题的，br太多了
好好了解一下 块元素、行内元素、行内块元素的特点，有针对的去利用
元素在容器内居中的方法有很多。
用特定的居中属性，或者用定位，或者弹性盒都很好用。

本子兮

关于问题一：html元素按排列方式分为：行内元素、块元素、行内块元素，三者默认的占用空间不同，排列方式也不同，<img>是行内块元素,自身占用空间仅图片大小，<div>是块元素，占一整行，此外，text-align:center 只能对父元素设置才能生效；
关于问题二：如果只有表格的话，表格居中属性，<table align="center">
建议你先了解一下html标签种类与css排版方式，再思考样式比较好一点

Danmoits

之前看的w3school学习，很多东西没搞清楚，现在听视频教程，感觉好多了