li标签行内元素高度及居中

<head>
<title><title>
<style type="text/css">*{padding: 0px;margin: 0px;}li{list-style-type: none;width: 150px;float: left;line-height: 80px;/*行内元素不能设置高度，但可以设置行高*/text-align: center;/*让li内的内容水平居中，行内元素默认垂直居中*/}span{position: relative; /* li标签内的字体和图片中间对齐，让字体在原来位置top上移几个像素*/top: -5px;font-family: "宋体" , "微软雅黑" , "黑体";font-size: 14px;color: #000000;font-weight: bold;}</style>
</head>
<body><ul><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li><li><img src="../NewImgs/tu_48.png" /><span>耽误管理</span></li></ul>
</body>
</html>

结果

转载于:https://www.cnblogs.com/leee/p/5150361.html

li标签行内元素高度及居中相关推荐

html li是块级元素,li是行内元素吗？
li是行内元素吗? li不是行内元素:ul和li都是块级元素.因为ul和li标签的高度,行高以及外边距和内边距都可控制:且可以容纳内联元素和其他块级元素. 块级元素(block element),和其 ...
html标签——内联标签(行内元素)
阅读目录字体粗体斜体上下标划线 b em sup del strong i sub u 排版 span br 超链接 a 图片 img 回到顶部字体标签粗 ...
CSS 块元素,行内元素,行内块元素及元素之间转换
元素的显示模式元素一般分为块级元素和行内元素元素种类排列设置样式默认包含块元素独占一行可以设置宽高容器的100% 可以包含任何标签行内元素一行可以放多个行内样式不可直接设置宽 ...
HTML基础知识（一）：行内元素，块级元素，行内块元素
文章目录一.html元素分类二.块元素三.行内元素四.行内块元素五.替换元素和非替换元素六.元素转换七.总结一.html元素分类 html元素:行内元素.块元素.行内块元素二.块元素 ...
CSS学习05：块元素、行内元素、行内块元素
目录 1.块元素常见的块元素: 块级元素的特点: 注意: 2.行内元素常见的行内元素: 行内元素的特点: 注意: 3.行内块元素常见的行内块标签: 行内块元素的特点: 三种元素之间互相转换三种 ...
什么是行内元素、行内块、块级元素。它们有什么区别和特点
什么是行内元素.行内块.块级元素块级元素每个块级元素通常都会独占一行或者是多行,可以对其单独设置高度,宽度以及对齐等属性. 常见的块级元素有:<h1>~<h6>,<p ...
CSS高级选择器+块级元素，行内元素的特点+CSS定位+logo的做法
CSS高级选择器 *是通配符选择器(样式的重置) *{ margin: 0; padding: 0; } 元素的样式的重置,紧贴左上角子选择器:父级>子级后代选择器: 祖先子级作用: 1 ...
HTML行内元素和块级元素
1 常见的行内元素和块级元素特点注意块级元素 div h1~h6 p ul ol li 比较霸道:自己独占一行高度,宽度.外边距以及内边距都可以控制宽度默认是容器(父级宽度)的100% ...
行内元素、块元素、行内块
1. 行内元素不可以设置宽高,可以设置margin.padding,它的宽高是由内容撑开的: 一行可以有多个行内块元素. span a br em i label 2. 块元素可以设置宽高,在没有 ...

li标签行内元素高度及居中

li标签行内元素高度及居中相关推荐

最新文章

热门文章