CSS文本居中小技巧

everfight 发布于2019-08-30 12:57 / 1834人阅读

摘要：我们解析下这个弹窗内容短，居中，内容长，居左，不写两套样式内容，怎么将两个综合在一起常做的话，估计看了前面的图也知道答案的了，看如下样式知道了吗看出什么了吗。来人，上代码参考

我个人比较喜欢简单粗暴的上实际的结果的，所以，请看如下需求（其实很简单的，工作中一直有用到这种方法，就是没想着去写，然后看到其他人写了一些，我也把我的应用场景也写下，权当记录吧！）

看到这个弹窗了吗？通常我们的弹窗里的内容文本都是居中的，那么问题来了，怎么保持短的时候居中，长的时候则据左呢？

这是在工作中会遇到的，对你来说可能不是弹窗或者说是其它的东西。我们解析下这个弹窗：

内容短，居中，text-align: center

内容长，居左，text-align: left

不写两套样式内容，怎么将两个text-align综合在一起？常做的话，估计看了前面的图也知道答案的了，看如下样式：

.container {
    text-align: center;
}

.content {
    display: inline-block;
    text-align: left;
}

知道了吗？看出什么了吗？ (。・∀・)ノ

来人，上代码 https://jsfiddle.net/lyplba/ye63j3e6/embed/result/

参考：aligning-text-smartly-in-css

GPU云服务器云服务器 css技巧 css文本框西山居 html浮动居上

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115190.html

[译]148个资源让你成为CSS专家

摘要：层叠样式表二修订版这是对作出的官方说明。速查表两份表来自一份关于基础特性，一份关于布局。核心第一篇一份来自的基础参考指南简写速查表简写形式参考书使用层叠样式表基础指南，包含使用的好处介绍个方法快速写成高质量的写出高效的一些提示。迄今为止，我已经收集了100多个精通CSS的资源，它们能让你更好地掌握CSS技巧，使你的布局设计脱颖而出。 CSS3 资源 20个学习CSS3的有用资源 C...

impig33 2019-08-29 11:10 评论0 收藏0
CSS垂直居中和水平居中

摘要：前言总括居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。前言总括： CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇...

fredshare 2019-08-30 12:52 评论0 收藏0
CSS垂直居中和水平居中

摘要：前言总括居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇百怪了。前言总括： CSS居中一直是一个比较敏感的话题，为了以后开发的方便，楼主觉得确实需要总结一下了，总的来说，居中问题分为垂直居中和水平居中，实际上水平居中是很简单的，但垂直居中的方式和方法就千奇...

haitiancoder 2019-08-01 15:07 评论0 收藏0
前端技术之_CSS详解第四天

摘要：前端技术之详解第四天一第三天的小总结盒模型，什么是盒子所有的标签都是盒子。如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的盒子居中的值可以为，表示自动。前端技术之_CSS详解第四天一、第三天的小总结盒模型box model，什么是盒子？　　所有的标签都是盒子。无论是div、span、a都是盒子。图片、表单元素一律看做文本。盒模型有哪些组成：　　width、hei...

番茄西红柿 2019-04-23 13:45 评论0 收藏0