鱼C论坛

 找回密码
 立即注册
查看: 2672|回复: 2

[已解决]请问vertical-align为何不能设置纵向宽度

[复制链接]
发表于 2017-5-3 23:54:12 | 显示全部楼层 |阅读模式

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

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

x
本帖最后由 不二如是 于 2017-5-4 06:09 编辑
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         p{
  8.             text-align: center;
  9.             width: 200px;
  10.             height:100px;
  11.             vertical-align: baseline;
  12.             background-color: #21e0b5;
  13.             border: dashed red;

  14.         }

  15.     </style>
  16. </head>
  17. <body>
  18. <p>一段测试文字</p>
  19. </body>
  20. </html>
复制代码

代码在这里,请问大神有什么错吗,为啥text-align就设置成功了vertical-align不行
如图所示

                               
登录/注册后可看大图
最佳答案
2017-5-6 07:33:06
本帖最后由 不二如是 于 2017-5-6 07:37 编辑

CSS vertical-align 属性,并不是用来垂直居中元素

(不像text-align:center那么随意实现水平居中)

主要用来对其<p>内,图像和文字的布局。




设置你要居中区域的父级区域为relative

设置居中区为position: absolute;

然后在设置top:top:50%;




0 0 0 5 - 优化内容区设置



想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2017-5-4 00:05:36 | 显示全部楼层
题目因该是为啥纵向对齐设置无效,横向对齐却可以,发帖的时候比较激动。
C:\Users\bocheng\Desktop\1.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-5-6 07:33:06 | 显示全部楼层    本楼为最佳答案   
本帖最后由 不二如是 于 2017-5-6 07:37 编辑

CSS vertical-align 属性,并不是用来垂直居中元素

(不像text-align:center那么随意实现水平居中)

主要用来对其<p>内,图像和文字的布局。




设置你要居中区域的父级区域为relative

设置居中区为position: absolute;

然后在设置top:top:50%;




0 0 0 5 - 优化内容区设置



想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-26 08:51

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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