如何将列表居中?

2023-12-31

我有一个无序列表,我想将它放在页面中间。

我的意思是,左侧项目符号应该与具有最长文本的列表项的中心垂直对齐,但位于页面的中心?

  • 第 1 项很无聊
  • 第 2 项确实是一个很长的项目,哦,是的,它是
  • 第 3 项几乎和第 1 项一样无聊

并不是


 
                 * item 1 is boring
    * item 2 is a very long item indeed, oh yes it is
           * item 3 is almost as boring as item 1
  

这是给您的答案,它将您的列表以可变宽度居中:jsfiddle http://jsfiddle.net/mqchen/Qh48T/。它是纯CSS,不添加任何额外的标签。

方法是第一个在这里发布 http://www.tightcss.com/centering/center_variable_width.htm,并且应该适用于几乎所有浏览器。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将列表居中? 的相关文章

  • 选择接下来的第n个同级

    我想知道是否有比我发现的更好的解决方案而不改变 html 结构 HTML 结构如下所示 div class wrap div class divider div div class block div div class block div
  • jQuery能否获取未绘制的动态元素的大小

    我的意思是如果我用 jQuery 和 DOM 创建一个 Element var MainHolder document createElement div addClass box 如果我打电话MainHolder width 如果不在窗口
  • 我无法注入带有“!important”规则的样式[重复]

    这个问题在这里已经有答案了 我尝试使用以下代码注入样式 document body style color green important Per CSS 级联引用 http www w3 org TR CSS2 cascade html
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • 调整离子卡中的图像大小

    我想显示一组图像 并在下面说明 我选择使用 Ionic 卡 我得到这个结果 第一张图片 虽然我想保留现在的相同布局 并添加描述 这是我的代码
  • 图像仅在 iPhone x 上拉伸

    我目前正在设计和构建一个 html 和 css 网站 遇到了一个小问题 我使用 chrome 开发工具检查了响应能力 根据手机和平板电脑的大小调整窗口大小 一切看起来都很好 然而 现在我在 iPhone X 上检查了该网站 图像全部垂直拉伸
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • CSS 字体在 Firefox 中不起作用

    我下面有这个字体代码 它在谷歌浏览器中工作正常 但在火狐浏览器中根本不起作用 为什么
  • 当td内容太宽时,表格溢出父div

    我准备了一个 JSFiddle 来解释 向你展示我的问题 http jsfiddle net nz96C http jsfiddle net nz96C 乍一看还不错 但是当我添加一些文本时 firsttd一旦使用 tds 整个宽度 整个表
  • 右列固定的 Div 表

    我最近接手了一个非营利网站作为一个项目 我正在使用一个现有的网站 所以我必须使用很多已经编程的东西 所以我所要做的就是创建设计 I made a diagram of basically what I can t figure out ho
  • 为网格注入浏览器前缀不适用于 Vue

    我已经在这件事上浪费了一个下午的时间了 我被难住了 我发现IE11不支持grid template我需要使用 ms grid columns and ms grid rows相反 我正在尝试生成一些 CSS 并通过 Vue 方法注入它 这适
  • 将无序列表转换为目录

    参考这个小提琴 http jsfiddle net exGnZ http jsfiddle net exGnZ 你好 我正在尝试用无序列表和前导点重现目录 不幸的是 当内容很长时 格式就会崩溃 有谁知道如何让下图中的第二章与点出现在同一行
  • 如何使用 :nth-child() 选择所有子项中的所有其他

    我正在开发一个评论系统 我需要拥有其他所有孩子 div 甚至是第一个孩子的孩子 用 CSS 选择 例如 假设我有这个标记 为了简单起见 省略了不需要的结束标签 div class comment div class comment div
  • 如何更改 Bootstrap 导航栏折叠断点

    目前 当浏览器宽度低于 768px 时 导航栏将更改为折叠模式 我想将此宽度更改为 1000px 这样当浏览器低于 1000px 时 导航栏就会更改为折叠模式 我想在不使用 LESS 的情况下执行此操作 我使用的是手写笔而不是 LESS 我
  • CSS 中的 Data-URI SVG 背景在 Firefox 中不起作用

    好的 这就是我想做的 我的 css 文件中有这段代码 form row textfield hover textfield m hover background image url data image svg xml base64 PHN
  • 如何默认或通过 CSS 将详细信息元素设置为 OPEN

    HTML5 添加了两个新元素 可用于标记文章的目录 details and summary 详细信息元素默认为关闭状态 隐藏除摘要元素之外的所有内容 单击时 它会展开以显示其内容 当它执行此操作时 它会向详细信息元素添加一个 open 属性
  • 当 Chrome 中嵌套滚动中的数据更改时防止页面滚动

    我在页面中有一个固定大小的元素 带有 溢出 滚动 其内容经常更改 我预计该元素内部发生的更改会影响该元素的滚动 但不会影响页面滚动 但是当这个元素位于页面顶部时 页面本身开始滚动 我怎样才能防止这种情况发生 要重现此行为 我在 chrome
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 粘性背景图像/使用 CSS

    我目前正在创建我的第一个网站 并且即将完成 我在标题下为主体使用背景图像 我发现每个页面都有一个问题 因为它们的高度都不同 这使得我背景图像的当前设置放大图片以适合整个页面 我想做的是将背景图像设置为 粘性 我的想法是 背景图像将直接位于标
  • 在什么情况下,使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢?

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更

随机推荐

  • RetroFit 状态代码 201 解释为错误

    我正在开发一个 RESTful API 它有一个端点 可以创建一个实体 该端点通过 POST 调用 并以 201 和正文中的字段进行响应 我看到 Retrofit 将这个 201 响应解释为失败并调用 failure 方法 一种解决方案是将
  • 如何提高终端中的光标速度? [关闭]

    Closed 这个问题是无关 help closed questions 目前不接受答案 如何提高终端中的光标速度 顺便说一句 我有 Mac OS X 了解 Linux 上的它也会很有趣 我不知道应该在 Google 中搜索什么 或者您喜欢
  • 如何在C中使用重定向进行文件输入

    我需要从终端获取文件 我知道命令将如下所示 a out lt fileName txt 我不确定如何在程序中使用 fgets 来使用从终端请求的文件 使用重定向将输入文件的内容发送到标准输入 因此您需要从代码内的标准输入读取 所以类似于 为
  • Gmail.Users.Messages.remove(me, id) - 未找到错误

    有没有其他人发现高级 Gmail 服务调用 Gmail Users Messages remove me id 现在出现错误 有人有解决办法吗 我有一个可靠的脚本 每隔几个小时就会删除垃圾邮件和垃圾邮件 自 17 年 2 月 21 日左右起
  • 写入响应正文后在 HttpServletResponse 上设置标头

    我发现了一个困难的方法 那就是不可能向一个HttpServletResponse在开始将响应主体写入输出缓冲区之后 我想在某些随机宇宙中这可能是有意义的 即使所有内容仍然只是缓冲在内存中 现在的问题是 是否有一些技巧可以以某种方式规避这个问
  • 获取数组中出现次数最多的元素

    我正在寻找一种优雅的方法来确定哪个元素出现次数最多 mode http en wikipedia org wiki Mode 28statistics 29 在 JavaScript 数组中 例如 在 pear apple orange a
  • 通过Asp.net背后的代码访问虚拟目录文件夹

    我正在尝试从代码隐藏访问虚拟目录文件夹 ASP Net 网站名称 SuperImages 物理文件夹 C images 虚拟目录文件夹 allimages 与App Data Scripts Properties文件夹处于同一级别 我正在尝
  • 如何使用 Fragments 在 TabLayout 中的每个选项卡中显示不同的布局

    我一直在尝试使用 PagerTabStrip 在可滑动的 TabLayout 中的不同选项卡中显示不同的布局 有人可以帮忙吗 我想在第一个选项卡中显示一个布局 在第二个选项卡中显示第二个不同的布局等 public class MainAct
  • Facebook PHP SDK 上传照片

    尝试将我的服务器上渲染的照片即时上传到用户的 Facebook 相册 由于 FB 文档非常 非常 非常糟糕 至少可以这么说 我希望有人向我展示一些使用 PHP SDK 进行图形 API 调用的优秀代码示例 像这样的东西 try facebo
  • 执行 R 代码时出现错误“无法将‘环境’类型强制转换为‘字符’类型的向量”

    require shiny setwd C Users Harshad Desktop Equiskill BA cars lt read table file cars csv sep header TRUE quote var list
  • 使用 Spring Boot 的 Feign 客户端:RequestParam.value() 参数 0 为空

    我使用 Spring Boot 创建了一个简单的 Feign 客户端 如下所示 FeignClient spring cloud eureka client public interface GreetingClient RequestMa
  • 交叉引用 github 中的提交

    我想在我的主存储库的 github 问题中引用其他存储库 在本例中为子模块 中的提交 是否可以在不输入完整超链接的情况下执行此操作 类似于 github 如何从提交号创建缩短的超链接 答案 这样我们懒人就可以找到它 而不需要点击链接GitH
  • 如何用python创建系统托盘弹出消息? (视窗)

    我想知道如何用 python 创建系统托盘弹出消息 我在很多软件中都看到过这些内容 但很难找到资源来使用任何语言轻松完成此操作 有人知道在 Python 中执行此操作的一些库吗 在的帮助下pywin32 library https sour
  • 使用resteasy-jaxrs 的简单示例不起作用

    当我访问该页面时 我无法收到 hello 消息 package jaxrs ressources import javax ws rs GET import javax ws rs Path import javax ws rs PathP
  • 将回调函数传递给 jQuery AJAX 成功函数

    我试图传入一个函数 以便在 AJAX 调用成功时运行 但是它不起作用 因为它说 回调不是函数 Example 调用代码 getGrades var JS function getGrades grading company Set file
  • 为什么 IdHTTPProxyServer 会更改请求的 HTTP 版本?

    最近 我发现IdHTTPProxyServer会自动将所有HTTP 1 1请求更改为HTTP 1 0请求 这对我来说有点奇怪 因为我认为代理服务器不应该更改 HTTP 版本 有什么方法可以强制代理服务器不更改 HTTP 版本吗 TIdHTT
  • 在 PHP 中将 64 位十六进制转换为浮点数

    我正在尝试将 64 位十六进制数转换为 PHP 中的浮点数 40F82C719999999A 如果我在 IEEE 754 浮点转换页面中运行它http babbage cs qc cuny edu IEEE 754 old 64bit ht
  • 使用什么框架从 iPhone 连接到 SQL Server 实例? [复制]

    这个问题在这里已经有答案了 我需要编写一个 iPhone 应用程序来连接 SQL Server 实例 但我不知道可以使用哪个框架来执行此操作 有我可以使用的 ODBC 框架吗 任何链接将不胜感激 请不要告诉我使用网络服务 因为这不适合这种情
  • 使用 office.js 在 Word 中插入注释

    我正在尝试在 office js 中制作一个 Word 插件 以在文档中插入注释 在我看来 实现这一目标的唯一方法是使用 OOXML 我可以插入评论 但我的问题是 当我这样做时 会插入一个段落分隔符 并且可以从该图像中看到 据我所知 归结为
  • 如何将列表居中?

    我有一个无序列表 我想将它放在页面中间 我的意思是 左侧项目符号应该与具有最长文本的列表项的中心垂直对齐 但位于页面的中心 第 1 项很无聊 第 2 项确实是一个很长的项目 哦 是的 它是 第 3 项几乎和第 1 项一样无聊 并不是 ite