htmldt标签⽂字居中,css dl-dt-dl使图⽚下⾯⽂字居中
⽅法之⼀如下：
图⽚及图⽚说明.html    ⽂件代码如下：123456789101112131415161718192021html>
图⽚及图⽚说明
图⽚⼀
图⽚⼆
图⽚三
图⽚四
图⽚五
图⽚六
图⽚七
图⽚⼋
img.css    ⽂件代码如下：
12345678910111213141516171819202122232425262728body {    background: #fff;    margin: 0 auto;} dl {    margin: 0 24p 是关键⾏，控制列表总宽度  */}dl li {    list-style-type: none;  /*  去掉列表前的点  */    display: inline;        /*  这是关键⾏，使列表变成
内联  */    float: left;            /*  这是关键⾏，使内联的列表元素全部左浮动  */}dl li p .img {    width: 200px;        /*  这是关键⾏，控
制图⽚宽度  */    height: 200px;    display: block;      /*  这是关键⾏，把内联图⽚变成块级盒模型  */    margin-bottom: 5px;  /*  为
块级盒模型图⽚添加5px下外边距  */}dl li p {    text-align: center;  /*  这是关键⾏，控制⽂字居中  */}dl li p.marginright {    margin-
right: 40px;    /*  这是关键⾏，控制1 2 3  5 6 7图⽚右外边距宽度  */    text-align: center;}
你的问题困难在于HTML中为
列表 中的 添加合适的标签中的和⽂字包裹起来。这样HTML就⾜够结构化。
CSS中，主要解决三个问题。
html怎么让所有内容居中1. 控制好
列表的总宽度，及各幅图⽚的宽度，图⽚1 2 3 5 6 7的右外边距，就会⾃动换⾏。
1.1
左右外边距24px ，边框默认为0 ， 内边距10px，宽920px，总宽988px；
1.2图⽚1 2 3 4每幅图⽚宽200px(⾼200px), 包含图⽚1 2 3的
的总宽920px，所以到这⾥放不下图⽚，会⾃动换⾏。
1.3图⽚5 6 7 8每幅图⽚宽200px(⾼200px), 包含图⽚5 6 7的
的总宽920px，这是第⼆⾏。
2. ⽤ display:inline; 使
变成内联显⽰，再加上 float:left; 所有的就浮动起来成为⼀⾏，但是因为以上1，我们控制了宽度，使得内联的到了固定宽度就换⾏。
3. 再⽤display:block; 把包含“⽂字”的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。