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

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 父级div高度自适应，如何使其中内容垂直居中
返回列表 发新帖
查看: 3682|回复: 2

[已解决]父级div高度自适应，如何使其中内容垂直居中

[复制链接]
鼻屎炖蘑菇
发表于 2021-11-8 10:10:15 | 显示全部楼层 |阅读模式

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

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

x
提问 因为编写的网页要实现不同屏幕自适应大小 所以div模块的大小都用百分比设置了 这样子情况下div块的大小高度都是未知的 我想实现将其中的文字居中显示 之前使用的是line-height设置高度加上具体大小px 但是现在父级元素的高度未知 在这种情况下 想实现块级元素里面的文字居中显示该如何实现呢？
            width: 10%;
            height: 100%;
            display: inline-block;
            text-decoration: none;
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 100%;
            background-color: black;
我的代码如下
最佳答案
月排行榜 / 总排行榜
Rydia
2021-11-8 11:21:56
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>text</title>
  5.   <style>
  6.     *{
  7.       margin: 0;
  8.       padding: 0;
  9.     }

  11.     #box{
  12.       margin: 100px auto;
  13.       height: 400px;
  14.       width: 1200px;
  15.       border: 1px solid aqua;
  16.     }

  18.     .inbox{
  19.       display: inline-block;
  20.       width: 10%;
  21.       height: 100%;
  22.       text-decoration: none;
  23.       color: white;
  24.       font-size: 100%;
  25.       background-color: black;
  26.       text-align: center;
  27.     }

  29.     .text{
  30.       /* 使用定位和位移实现垂直居中 */
  31.       position: relative;
  32.       top: 50%;
  33.       transform: translateY(-50%);
  34.     }

  36.   </style>
  37. </head>
  38. <body>
  39.   <!-- 父元素 -->
  40.   <div id="box">
  41.     <!-- 子元素 -->
  42.     <div class="inbox">
  43.       <!-- 被垂直居中的部分 -->
  44.       <p class="text">测试文本</p>
  45.     </div>
  46.   </div>
  47. </body>
  48. </html>
复制代码


大概就这样，还是有挺多方法的，我比较喜欢用上面这种
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2021-11-8 11:15:35 | 显示全部楼层
删除条目
line-height 和 text-align

修改条目
display: inline-flex;

增加条目
align-items: center;
justify-content: center;
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

Rydia
发表于 2021-11-8 11:21:56 | 显示全部楼层    本楼为最佳答案   
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>text</title>
  5.   <style>
  6.     *{
  7.       margin: 0;
  8.       padding: 0;
  9.     }

  11.     #box{
  12.       margin: 100px auto;
  13.       height: 400px;
  14.       width: 1200px;
  15.       border: 1px solid aqua;
  16.     }

  18.     .inbox{
  19.       display: inline-block;
  20.       width: 10%;
  21.       height: 100%;
  22.       text-decoration: none;
  23.       color: white;
  24.       font-size: 100%;
  25.       background-color: black;
  26.       text-align: center;
  27.     }

  29.     .text{
  30.       /* 使用定位和位移实现垂直居中 */
  31.       position: relative;
  32.       top: 50%;
  33.       transform: translateY(-50%);
  34.     }

  36.   </style>
  37. </head>
  38. <body>
  39.   <!-- 父元素 -->
  40.   <div id="box">
  41.     <!-- 子元素 -->
  42.     <div class="inbox">
  43.       <!-- 被垂直居中的部分 -->
  44.       <p class="text">测试文本</p>
  45.     </div>
  46.   </div>
  47. </body>
  48. </html>
复制代码


大概就这样，还是有挺多方法的，我比较喜欢用上面这种
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2025-6-8 22:44

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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