html文本长度不一样的对齐,关于html:文本在中间不对齐
本问题已经有最佳答案,请猛点这里访问。
我想重新创建这样的东西:
然后我会将它用于社交媒体和外部网站:)这是我能想到的:
如您所见,这里有两个问题:
图片不适合div。
文字不在中间。
我想如果我可以将文本对齐到中心,图片也会自动适合,但我似乎无法做到。
这是我写的代码:
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: table-cell;
background: #ccc;
vertical-align: middle;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 1px;
}
github
stackoverflow
我认为vertical-align: middle;&text-align: center;这两行会使文本居中,但事实并非如此。
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: inline-flex;
align-items: center;
background: #ccc;
vertical-align: middle;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding-right: 0.7em;
}
.external-links img {
width: 2em;
height: 2em;
}
.external-links span {
padding-left: 0.5em;
}
github
stackoverflow
你可以尝试这个,我添加了新的css到.external-links和.external-links span来满足你的要求
要垂直对齐需要将vertical-align: middle;放在img标记上的文本。
关于不适合div的图像,您还需要将border-radius设置为图像。
a img {
vertical-align: middle;
border-radius: 32px;
}
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: inline-block;
background: #ccc;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 1px;
margin-right: 4px;
}
.external-links img {
vertical-align: middle;
border-radius: 32px;
margin-left: -2px;
}
.external-links span {
margin-right: 5px;
}
github
stackoverflow
除了上述内容之外,我在片段中进行了一些小的更改(比如将显示更改为inline-block并更改了一些边距)以使结果看起来更好一些。
使用display:inline-flex;使用HTML代码制作图像中心
.external-links {
display: inline-flex;
}
.external-links {
display: inline-block;
background: #ccc;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 1px;
}
.external-links > *{
vertical-align: middle;
text-align: center;
height: 100%;
}
vertical-align Inherited为no,所以你应该设置child。 如果你没有设置子对齐类型,图像html没有基线,所以图像的底部是新的基线,在图像之后,文本将按图像的底部对齐,如果你设置了子对齐类型,它们将起作用。 我认为。
将display: flex;添加到.child和.external-links
和
.external-links{justify-content: center;
padding: 10px;
align-items: center;
margin: 5px;}
.child {
margin: 20px;
display: flex;
}
.external-links {
display: flex;
background: #ccc;
border-radius: 32px;
color: black;
text-decoration: none;
justify-content: center;
padding: 10px;
align-items: center;
margin: 5px;
}
github
stackoverflow
只需将.external-links中的显示更改为display:inline-flex;
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: inline-flex;
background: #ccc;
vertical-align: middle;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 5px;
}
github
stackoverflow
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: inline-flex;
background: #ccc;
align-items: center;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 10px;
}
github
stackoverflow
删除display:table-cell和vertical-align:middle并添加display:inline-flex和align-items:center in .external-links类。另外,我添加了填充:10px以便更好地理解。
.external-links {
display: inline-flex;
align-items: center;
}
如果您不想添加flex概念,可以尝试以下结果。
.child {
height: 250px;
margin: 20px;
}
.external-links {
display: table-cell;
background: #ccc;
vertical-align: middle;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
padding: 10px;
}
img {
vertical-align: middle;
}
span {
display: inline-block;
vertical-align: middle
}
github
stackoverflow
将以下内容添加到您的CSS中:
.external-links img {
vertical-align: middle;
}
.external-links span {
vertical-align: middle;
}
您正在寻找line-height属性,如果您给它与height属性相同的值,您将获得垂直居中的文本。
试试这个:
.child {
height: 250px;
margin: 20px
}
.external-links {
padding: 1px;
display: table-cell;
background: #CCC;
vertical-align: middle;
line-height: 250px;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
}
您还可以使用显示属性的inline-block值并排对齐按钮。
.child {
height: 250px;
margin: 20px
}
.external-links {
padding: 1px;
display: inline-block;
background: #CCC;
vertical-align: middle;
line-height: 250px;
text-align: center;
border-radius: 32px;
color: black;
text-decoration: none;
}
html文本长度不一样的对齐,关于html:文本在中间不对齐相关推荐
- 【SQL编程】MySQL 5.7.28 版本使用 SQL 直接解析 JSON 字符串(判断是否是合法JSON类型+文本深度+文本长度+值类型+keys获取+值获取+不同深度数据获取)
1. 版本说明 SELECT @@version; -- 5.6.35-log 不支持 JSON 解析相关函数 -- 5.7.28 支持 2. 测试代码 准备阶段 建表 CREATE TABLE `t ...
- css3实现超出文本指定行数(指定文本长度)用省略号代替
测试代码: 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta name="viewport" c ...
- java 限制文本框长度_[Java教程]如何限制textarea文本框的输入字数
[Java教程]如何限制textarea文本框的输入字数 0 2015-12-24 15:00:10 如何限制textarea文本框的输入字数: 在实际应用中,往往需要限制文本框的输入字数的长度,下面 ...
- bootstarp span标签文本居中_web前端入门到实战:文本图标对齐的几种解决方案
常见的对齐问题: 浏览器是基于什么对齐图标和文本的? 为什么明明使用了 flex或vertical-align,图标还是看起来差了 1 像素没对齐? 文字图标布局 开发中遇见图片跟文字放在一行显示是最 ...
- 解决bert在文本长度的问题的方案,篇章级
一种解决bert长文本匹配的方法 https://arxiv.org/abs/1903.10972 bert提出来后打开了迁移学习的大门,首先通过无监督的语料训练通用的语言模型,然后基于自己的语料微调 ...
- excel取html文本长度,excel字符长度 怎么计算excel里的字符串的长度
请教:在EXCEL中如何统计字符长度? 打开excel文件,确定需要编辑的内容 选择功能区的"公式"功能 在公式中选择"LEN"功能 在text中选择需要编辑的 ...
- html单选框对齐,HTML - 对齐单选按钮和文本
假设您有两个相邻的简单表格单元格. 一个包含一个单选按钮和文本.另一个只包含文本.HTML - 对齐单选按钮和文本 单选按钮的大小设置为16x16像素(不要问我为什么,假设它就是这样). 字体大小为1 ...
- 计算文本长度,区分中英文字符,中文算两个长度,英文算一个长度
计算文本长度,区分中英文字符,中文算两个长度,英文算一个长度 public int Text_Length(string Text) { int len=0; fo ...
- [19/06/06-星期四] HTML基础_文本标签、列表(有序、无序、定义)、文本格式化(单位、字体、大小写、文本修饰、间距、对齐文本)...
一.文本标签 em:用来表示一段内容的着重点,语气上的强调.一般显示为斜体 i:是斜体显示,和em显示效果一样.h5规定不需要着重的内容而是单纯加粗或斜体可以用i或b.用的不多 strong:用来表示 ...
- NLP-文本处理:基本技术【命名实体识别、分词、拼写纠错、停用词、词性标注】、文本序列化、文本向量化、文本语料的数据分析、文本特征处理(Ngram特征添加、文本长度规范)、数据增强
分词(tokenization):英文通过空格或者标点符号,就可以将词分开:而中文的分词会涉及很多问题(未登录词问题.分词歧义问题.分词不一致问题),所以会有各种不同分词的算法. 清洗:我们需要对文本 ...
最新文章
- C#进行MapX二次开发之控件基本操作
- 视觉智能开放平台通过函数计算实现多人口罩佩戴识别
- linux 网卡是块设备吗,什么是网络块设备(Network Block Device)?
- 公众号服务器配置url证书问题,公众号服务器配置url,验证token一直出错,为什么?...
- 美国燃油“动脉”被黑客切断,网络安全走向哪里?专访山石网科|拟合
- 经典面试题(36):以下代码将输出的结果是什么?
- logstash 启动方式
- Gulp,grunt,seajs/require和browserify/webpack的区别
- 阿里java工具包_阿里开源的Java诊断工具Arthas(阿尔萨斯)
- 《时代三部曲》感悟四
- 如何用邮件客户端收发电子邮件,如何配置邮件客户端?
- 手把手教你一键U盘装系统
- 局部加权回归LOESS
- xtend怎么使用_Java替代Xtend又推出了另一个块摇摆更新
- 日语学习的一些网站推荐
- Git版本控制管理——分支
- 视频编码零基础入门(1):视频编解码之理论概述
- 剖析Framework面试-笔记(二)
- zigbee网络启动流程 ---- 协调器
- 关于pydicom参数说明