CSS 温故知新 CSS垂直居中

最新推荐文章于 2023-11-13 16:41:26 发布

weixin_30415113

最新推荐文章于 2023-11-13 16:41:26 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/haixiaomei/p/blue1.html

版权

头一次回答一位十分可爱大神小哥哥的front-end 问题【9102/3/26/14:00TuesdaySunnyDay】

自闭ing。。。。。。内心好想好想好想好想好想好想狠狠地敲自己脑袋QAQ

出丑都不在乎了，内心不断→_→自己。。。。。。

闭关修炼，不断加强，继续fighting！

CSS布局

水平-垂直对齐

元素居中对齐：margin:auto

Besides, 设置到元素的宽度can防止it溢出到容器边缘

元素通过指定宽度&&将两边的空外边距平均分配：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS Center</title>
 6     <link rel="stylesheet" type="text/css" href="center.css">
 7 </head>
 8 <body>
 9     <div>
10         I am a <span style="background-color:pink">"div</span>"div"in center
11     </div>
12 </body>
13 </html>

1 div{
2 margin:auto;/*水平居中对齐元素<div*/
3 width:50%;/*if not set width or 100% 居中对齐不起作用*/
4 border:2px solid lightgreen;
5 padding:12px;
6 }

!!!!如果没有设置width属性（or set 100%），居中对齐不起作用

文本居中对齐：text-align:center;

1 p { 2 text-align:center; 3 border:3px solid lightyellow; 4 }

图片居中对齐：margin：auto; && put it in 块元素margin：auto; && put it in 块元素

1 <img src="imgs/cat.jpg" width="200" height="400"
2     alt="Image">

1 img {
2     display:block;/*display:block->元素显示为块级元素，
3                     前后会带有换行符; */
4     margin:auto;
5     width:50%;
6     padding:20px;
7 }

顺带提下：display属性规定元素应该生成的框的类型默认值是 inline

1     <p>I am para1 </p>
2     <b>use disply:inline</b>
3     <p>I am para2</p>

1 p {
2     display:inline;
3     color: blue;
4 }

左右对齐：use position定位方法【且见下回分解~~~~~】

转载于:https://www.cnblogs.com/haixiaomei/p/blue1.html

weixin_30415113

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 温故知新 CSS垂直居中

头一次回答一位十分可爱大神小哥哥的front-end 问题【9102/3/26/14:00TuesdaySunnyDay】自闭ing。。。。。。内心好想好想好想好想好想好想狠狠地敲自己脑袋QAQ出丑都不在乎了，内心不断→_→自己。。。。。。闭关修炼，不断加强，继续fighting！CSS布局水平-垂直对齐元素居中对齐：margin:autoBesides, ...
复制链接

扫一扫