设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 为什么text-align可以盒子居中呢？
返回列表 发新帖
查看: 2690|回复: 1

[已解决]为什么text-align可以盒子居中呢？

[复制链接]
御笔剑客
发表于 2018-5-23 01:21:22 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>demo7</title>
  6.         <style type="text/css">
  7.                 body {
  8.                         background-color: #000;
  9.                 }
  10.                 div {
  11.                         text-align: center;
  12.                 }
  13.                 a {
  14.                         width: 200px;
  15.                         height: 50px;
  16.                         /*background-color: orange;*/
  17.                         display: inline-block;
  18.                         text-align: center;  /*文字水平居中*/
  19.                         line-height: 50px; /*在一行的盒子内，将行高设置为盒子的高度，即可实现垂直居中*/
  20.                         color: #fff;
  21.                         font-size: 22px;
  22.                         text-decoration: none;/*取消文本装饰*/
  23.                 }

  25.                 a:hover {
  26.                         background:url('h.png') no-repeat;
  27.                 }
  28.         </style>
  29. </head>
  30. <body>
  31.         <div>
  32.         <a href="#">专区说明</a>
  33.         <a href="#">申请资格</a>
  34.         <a href="#">兑换奖励</a>
  35.         <a href="#">下载游戏</a>
  36.         </div>
  37. </body>
  38. </html>
复制代码


第一张图是居中的，第二张图是靠左的
最佳答案
月排行榜 / 总排行榜
不二如是
2018-5-23 07:51:11
因为text-align就是用来干这个的阿

text-align属性指定元素文本的水平对齐方式。

left        把文本排列到左边。默认值：由浏览器决定；
right        把文本排列到右边；
center        把文本排列到中间；
justify        实现两端对齐文本效果；
1.png
12.png
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

不二如是
发表于 2018-5-23 07:51:11 | 显示全部楼层    本楼为最佳答案   
因为text-align就是用来干这个的阿

text-align属性指定元素文本的水平对齐方式。

left        把文本排列到左边。默认值：由浏览器决定；
right        把文本排列到右边；
center        把文本排列到中间；
justify        实现两端对齐文本效果；
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-23 21:52

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表