html – 列出项目中间垂直对齐_html-js-css

概述我有以下 HTML和CSS创建一个列表,列表项的最小高度设置.如果没有足够的内容填满整个高度,我希望列表项的内容在中间垂直对齐,而不是顶部.我该怎么办？ <html> <head> <style type="text/css"> ul { width : 300px; list-styl 我有以下 HTML和CSS创建一个列表,列表项的最小高度设置.如果没有足够的内容填满整个高度,我希望列表项的内容在中间垂直对齐,而不是顶部.我该怎么办？

<HTML>    <head>        <style type="text/CSS">            ul {                wIDth : 300px;                List-style-type: none;            }            li {                min-height : 45px;                vertical-align : mIDdle;                border-bottom : 1px black solID;            }        </style>    <head>    <body>        <ul>                <li>Testing testing 1234</li>            <li>Testing testing 1234 Testing testing 1234</li>            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234</li>            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>            <li>Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234 Testing testing 1234</li>       </ul> </body>

这给了我以下内容：

解决方法如果您添加了< div>在< li>内并对CSS进行以下更改,似乎有效：

li {    min-height : 45px;    border-bottom : 1px black solID;}li div {    height:45px;    display:table-cell;    vertical-align : mIDdle;}

看到它居住在这里 – 工程在ie8和FF4：http://jsfiddle.net/RrVBh/

总结

以上是内存溢出为你收集整理的html – 列出项目中间垂直对齐全部内容，希望文章能够帮你解决html – 列出项目中间垂直对齐所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/web/1099363.html

html – 列出项目中间垂直对齐

发表评论

评论列表（0条）