css如何设置文本在li元素中垂直居中显示

css如何设置文本在li元素中垂直居中显示:
本章节介绍一下如何利用css将文本设置为在li元素中垂直居中效果。
实现此效果非常的简单,只要利用line-height属性即可。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
ul li{
  width:400px;
  height:30px;
  line-height:30px;
  list-style:none;
}
</style>
</head>
<body>
<ul>
  <li>蚂蚁部落欢迎您,只有努力奋斗才会有美好的未来</li>
  <li>本站的地址是softwhy.com</li>
  <li>每一天都是新的,必须要好好的珍惜</li>
  <li>下一秒都是虚幻的,必须要把握好现在</li>
</ul>
</body>
</html>

只要将line-height属性值和height属性值设置为相同即可,其实不用height属性只是用line-height属性即可。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=16621

更多内容可以参阅:http://www.softwhy.com/divcss/

时间: 2024-10-29 19:07:20

css如何设置文本在li元素中垂直居中显示的相关文章

伪元素练习( css动态设置文本内容)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

利用css来让一个div在页面中垂直居中的方法

一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半. width:300px; height:200px; position:absolute; left:50% top:50%; margin:-100px 0 0 -150px ; 2.使用jquery代码  $(window).resize(function(){ $

设置list-style-position,li元素嵌套块元素时,Firefox浏览器布局失效处理

将ul列表样式符号放到列表内,很自然地想到设置list-style-position:inside.但当li元素嵌套有块元素时,Firefox下悲剧了. 查看:http://codepen.io/xiaoyewen/pen/KpzMLO Firefox下的效果成了这样的,Chrome与IE好好的 看来不能这样顺利地实现效果呀,无奈就换了思路,乖乖生成小黑点吧. .list div::before { content: '.'; font-size: 20px; position: relativ

css/css3实现未知宽高元素的垂直居中和水平居中

其实在平常的一些布局中也经常有要实现元素的垂直居中和水平居中的的需要,下面来写几种css/css3实现的未知宽高元素的水平和垂直居中的写法 ps:不考虑兼容问题(下次会写js实现元素的水平and垂直居中 ) 第一种 css3的transform .ele{ /*设置元素绝对定位*/ position:absolute; /*top 50%*/ top: 50%; /*left 50%*/ left: 50%; /*css3 transform 实现*/ transform: translate(

css实现文本块在容器中垂直居中

效果如图: css代码: .textContainer { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; overflow: hidden; text-overflow: ellipsis; line-height: 18px; -webkit-line-clamp: 2; } 如果有图标,需要固定定位到边上,不能用浮动. 原文地址:https://www.cnblogs.com/wan

子元素在父元素中垂直居中

方法一: 要求水平和垂直居中,可以是用margin:0 auto:和marggin-top:(父元素-子元素)/2 方法二: 要求子元素垂直居中,水平更加设计布局,可以使用定位,父元素relative,子元素absolute,并且子元素top设置50%,margin-top设置为子元素高的一半的负值 !DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>让DIV标签

Css基本样式————文本

一.CSS文本属性可定义文本外观 二.通过文本属性,可以改变文本的颜色.字符间距.对齐文本.装饰文本.对文本缩进 三.常用属性: color        文本颜色 body{     color: aqua; } <body>     <p>查看颜色</p> </body> 这里给body设置color,在p标签中可以看到效果 说明color这个属性是可以继承的 direction        文本方向 line-height        行高 let

CSS背景、文本属性

一.背景属性 1.背景颜色 background-color: red; 2.背景图片相关 1)设置背景图片:background-image : url("路径"); 设置背景图片,指定图片路径,如果路径中出现中文或空格,需要加引号 2)设置背景图片的重复方式 默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况: 1. 如果元素尺寸大于图片尺寸,会自动重复平铺,直至铺满整个元素 2. 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见

让子元素在父元素中水平居中align-items

做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元素交叉轴上如何对齐的,大多数不理解交叉轴是什么,下面举例来说明,不多说直接上代码 现在是这样显示的,我需要让子元素在父元素中垂直居中 1需要给父元素加display:flex;(不明白的可以先查下,后期会说明这个属性的作用) 2.再给父元素(也就是box)加align-items:center; 效