收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 6864|回复: 19

[求助] 怎么才能让display: inline-block <a>里的文字垂直居中

[复制链接]
发表于 2016-5-9 14:39:16 | 显示全部楼层 |阅读模式
本帖最后由 maptime 于 2016-5-9 14:39 编辑

 提示:您可以先修改部分代码再运行



试遍了line-height\margin:0 auto\vertical-align: middle都不行。。。

不知道怎么才能让这个文字实现水平垂直都居中?

先谢谢大家
发表于 2016-5-9 15:03:36 | 显示全部楼层
本帖最后由 dakular 于 2016-5-9 15:05 编辑

 提示:您可以先修改部分代码再运行

回复 支持 1 反对 0

使用道具 举报

发表于 2016-5-9 16:27:16 | 显示全部楼层
本帖最后由 jianwang19 于 2016-5-9 16:33 编辑

这样比较好,兼容性强,比如如果文字比较多,会换行的情况下,文字还是局中

 提示:您可以先修改部分代码再运行

回复 支持 1 反对 0

使用道具 举报

 楼主| 发表于 2016-5-9 15:41:16 | 显示全部楼层

一开始我搞错了,谢谢
回复 支持 反对

使用道具 举报

发表于 2016-5-10 09:24:54 | 显示全部楼层
  1. <html>
  2. <head>
  3. </head>
  4. <body style="text-align:center;">
  5. <a href="#" style="display:inline-block;width:400px;height:200px;background:#ccc;line-height:200px;">链接一</a>
  6. </body>
  7. </html>
复制代码
回复 支持 反对

使用道具 举报

发表于 2016-5-10 09:32:57 | 显示全部楼层
来学习的!赞一个
回复 支持 反对

使用道具 举报

发表于 2016-8-25 23:29:05 来自手机 | 显示全部楼层
vertical-align
回复 支持 反对

使用道具 举报

发表于 2016-8-26 10:25:15 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2016-8-26 10:27:55 | 显示全部楼层
两种方法,当然还有几种方法,你先用的吧,希望能帮到你

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2016-8-26 10:28:48 | 显示全部楼层
图片是可以换成文字的,只要方法对了就成
回复 支持 反对

使用道具 举报

发表于 2016-8-28 13:15:25 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2016-8-30 15:26:35 | 显示全部楼层
垂直居中不要给高,可以这样
padding-top:100px;padding-bottom:100px;
回复 支持 反对

使用道具 举报

发表于 2016-9-1 18:20:35 | 显示全部楼层
huerfei 发表于 2016-8-30 15:26
垂直居中不要给高,可以这样
padding-top:100px;padding-bottom:100px;

说实话 这样感觉有点不合适啊 假如你要所用情况下都自动垂直居中呢
回复 支持 反对

使用道具 举报

发表于 2016-9-2 08:45:40 | 显示全部楼层
说实话我之前也遇到过这样的问题,单一的一个可以用padding-top;padding-bottom;还是管用的。
再不济就用table,table可以(valign="middle")
回复 支持 反对

使用道具 举报

发表于 2016-9-2 09:29:46 | 显示全部楼层
huerfei 发表于 2016-9-2 08:45
说实话我之前也遇到过这样的问题,单一的一个可以用padding-top;padding-bottom;还是管用的。
再不济就用t ...

个人觉得还是line-height: 最好,如果是要图片垂直剧中的话 display:table 就可以 用table布局真的对SEO影响太大 而且不给高度直接padding-top padding-bottom的话 会造成用同样方法的块不整齐  考虑到布局的话 还是不要 如果只是单一一个元素需要垂直居中的话 直接算一下就好了 padding-top就行 也没必要不要高度  
回复 支持 反对

使用道具 举报

发表于 2016-9-7 11:44:33 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2016-9-7 14:12:50 | 显示全部楼层
本帖最后由 llqfront 于 2016-9-7 16:07 编辑

重磅,你觉得你遇到瓶颈了吗?你觉得你想向高级,架构师进军,请进入大师通道。
大于2年以上前端工程师专享入口:http://www.xhanglu.com/fe.html
前端集成解决方案深度课程。
回复 支持 反对

使用道具 举报

发表于 2016-9-7 14:17:25 | 显示全部楼层
本帖最后由 llqfront 于 2016-9-7 14:18 编辑


前端集成解决方案这种深度课程
回复 支持 反对

使用道具 举报

发表于 2016-9-10 11:37:33 | 显示全部楼层
<!DOCTYPE html>
<html>
        <head>
                <title>居中</title>
        </head>
        <body>
                <div style="width:500px;height:300px;background-color:gray;display:table-cell;vertical-align:middle;text-align:center;">
                        <a href="#">连接地址</a>
                </div>
        </body>
</html>
回复 支持 反对

使用道具 举报

发表于 2016-9-10 11:39:24 | 显示全部楼层
<!DOCTYPE html>
<html>
        <head>
                <title>居中</title>
        </head>
        <body>
                <div style="width:500px;height:300px;background-color:gray;display:table-cell;vertical-align:middle;text-align:center;">
                        <a href="#">连接地址</a>
                </div>
        </body>
</html>这样对seo有影响吗?
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-22 06:40 , Processed in 0.124687 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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