目录
如何让div标签在页面中实现居中的效果?
如何让div标签里面的字体实现居中的效果?
text-align属性是干什么用的?
如何让div标签在页面中实现居中的效果?
方法:把css文件中相关标签的选择器中的margin属性设置为0 auto。例子如下,
.abc { padding: 20px 40px; margin: 0 auto;//使div标签处于水平居中的状态 text-align: center; line-height: 400px; background-color: red; width: 100px; height: 400px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/index_1.css"> <title>Document</title> </head> <body> <div class="abc">你好</div> </body> </html>
如何让div标签里面的字体实现居中的效果?
方法:使用text-align属性和line-height属性。text-align:center。line-height:div的height的高度。
text-align属性是干什么用的?
控制写在标签里面的内容文本的水平方向的对齐方式,是居中(center),还是左对齐(letf),还是右对齐(right)。下面以右对齐(text-align:right)来进行说明。
.abc { margin: 0 auto; text-align: right; line-height: 400px; background-color: red; width: 100px; height: 400px; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/index_1.css"> <title>Document</title> </head> <body> <div class="abc">你好</div> </body> </html>
文章来源:https://www.toymoban.com/news/detail-469964.html
文章来源地址https://www.toymoban.com/news/detail-469964.html
到了这里,关于css------div标签中居中的方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!