css设置文本(上下)居中显示

文本的居中显示

示例图：

css 样式

 <style>.item {width: 150px;height: 200px;border: red 1px solid;box-sizing: border-box;float: left;}.first {display: flex;align-items: center;justify-content: center;}.second {line-height: 200px;}.thrid {position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);}</style>

body体

<body><div class="first item"><span>flex 布局实现good good study day day up</span></div><div class="second item"><span>lineHeight用于单行</span></div><div class="thrid item"><span>利用position 定位来实现1good good study day day up</span></div></body>

script


<script>function checkHtml(htmlStr) {var reg = /<[^>]+>/g;return reg.test(htmlStr);}checkHtml('点击此<span style="color: rgb(244, 113, 31);">处进</span><span style="color: rgb(136, 136, 136);">行编</span>辑')
</script>

css设置文本(上下)居中显示相关推荐

CSS设置文本超出隐藏显示省略号
CSS设置文本超出隐藏显示省略号单行文本多行文本在线试一试单行文本 HTML代码如下: <pclass="ellipsis1"title="单行文本,超出隐 ...
html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中. display属性实现图片居中的两种方法: 1 ...
Origin Pro 8.5设置文本框居中显示
Q:在图形内新增了Text Object(文本框),如何使其居中? A:可执行如下操作: 单击文本框,右键Programming Control 在对话框内键入:XB.x=1/2*(layer.x.f ...
CSS设置文本字体居中
span{text-align: center; }
css不换行省略号没作用,flex布局下，css设置文本不换行时，省略号不显示的解决办法...
大致是有一个 main 容器是 flex 布局,左边一个 logo 固定宽高,右边 content 动态宽度. a name a info Lorem ipsum dolor sit amet, co ...
css设置文本显示高度隐藏超出部分
通过height属性设置文本元素的显示高度,通过overflow属性设置文本元素超出高度时显示隐藏. overflow 属性规定当内容溢出元素框时发生的事情.当元素值设置为hidden是就会隐藏超出的 ...
html语言图片无法居中,css设置图片无法居中是什么原因？
在进行网页布局的时候,有时候图片的位置可能会影响整个页面的美观程度,我们经常会设置图片居中显示,但有时我们会遇到css设置图片无法居中. 下面我们来看一下css设置图片无法居中是什么原因. css设置 ...
【Android】自定义控件让TextView的drawableLeft与文本一起居中显示
前言 TextView的drawableLeft.drawableRight和drawableTop是一个常用.好用的属性,可以在文本的上下左右放置一个图片,而不使用更加复杂布局就能达到,我也常常喜欢 ...
css超出两行省略号没效果,Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... {{item.name}} {{item.name}} export default { return { item: {name:'this is a very ...
CSS控制文本超出打点显示
CSS控制文本超出打点显示 1 单行文本过长打点 2 多行文本打点显示 3 涉及的属性 3.1 white-space 3.2 text-overflow 1 单行文本过长打点只有1行文本时,需要满 ...

css设置文本(上下)居中显示

文本的居中显示

css设置文本(上下)居中显示相关推荐

最新文章

热门文章