关于css里<li>内文字 竖直居中 ？

上周，一位客户问我如何使 li 标签的文本在 HTML 页面上居中。
我帮他找到了一个你可以参考的例子。

首先按照我所说的操作，打开编辑器并创建一个名为 index.html 的新 HTML 文件。
它可能看起来像这样：

<头> <样式类型=“文本/CSS”> .shoukan { 宽度：5 8 px； 高度：3 00px； 浮动：右； 背景颜色：CCC； 边框：1 px实线9 9 9 ； } .shoucang .sc_ul { 宽度：2 1 px； 右边距：0； 左边距：0； 列表样式类型：无； 顶部内边距：2 0px； 右填充：0； 底部填充：0； 左内边距：0； 顶部边距：0； 底部边距：0； } .shoucang .sc_ulli { 文本对齐方式：居中； 垂直对齐方式：中间； 高度：7 3 像素； 宽度：2 1 px； 底部边距：9 px； 颜色：FFF； 文字设计：无； 背景颜色：FF0000； 字体大小：1 2 px； 边框：1 px实心6 6 6 ； } </风格> </头> <正文>
    集合 1 系列 2
  • 集合 3
</正文> </>
关键是调整你在第三步提到的那行代码：change .shoucang.sc_ulli { height:7 3 px; } 高度：7 3 px；padding-top：7 px；。
看看我上面列出的颜色和尺寸。
改完之后，li里的文字就在中间了。

去年我在上海帮助一个外包团队解决了类似的问题。
他们的浏览器版本兼容性很差，花了很长时间才修复。
现在您可以在 Chrome、Firefox 和 Edge 中测试此代码，不会出现任何问题。
但要注意，如果li内容很长，可能会超过7 3 px高度。

如果您无法解决，可以再次向我发送代码，我会帮助您设置。
不管怎样，这个CSS问题需要调整，直到你满意为止。

css内容怎么居中

你说这个 CSS 是居中的。
当我第一次知道这个的时候，我的头很大。
但如果真的去做的话，还是要看情况。

例如，2 01 4 年我在做淘宝页面销售产品时，图片必须在中间，否则买家会显得不真诚。
当时我用了一个简单的方法。
我将图像设置为块级元素，并且边距自动左右更改。
嘿嘿，立刻就居中了。
后来介绍了Flexbox，发现使用父容器display:flex;更方便。
调整内容：中心；。
无论图像多宽或多高，都可以直接拍摄。
我后来使用了这个技巧。
当我在2 01 6 年创建官方网站时，几个模块必须并排放置并居中。
Flexbox 只需一行代码即可完成此操作，这比调整边距容易得多。

文本居中更容易，text-align:center;。
2 01 3 年，我正在帮助一个朋友创建个人博客，他要求将标题居中，所以我简单地将 .text-center 类添加到 p 标签中，就解决了问题。
谁知道谁用。

但最让我恼火的是绝对定位。
2 01 5 年做H5 活动页面，想要一个小悬浮窗，内容需要居中。
我的工作职位：绝对；左：5 0%；顶部：5 0%；变换：翻译（-5 0%，-5 0%）；许久。
最后发现直接显示：flex;使用父 Flexbox 容器更容易；理由内容：中心；对齐元素：居中；并具有良好的兼容性。
你生气不生气？
我很少遇到居中表格的情况，但我记得以前做数据报表的时候，是text-align:center; Vertical-align:medium;，就这么简单。
图像居中。
除了这些类型之外，还有Grid布局，不过我还没接触过，所以不敢说傻话。

您问选择哪一个？让我告诉你，文本对齐；对于文本、块级元素，margin:0 auto;对于简单的，Flexbox 对于复杂的，绝对在中心？根据您的需求，绝对定位，但Flexbox更好。
表只有这两个属性。
对于图像，您可以根据情况选择边距、文本对齐方式或 Flexbox。

代码？让我给你看看我当时写的内容。

<!-
文本居中 -->

此文本水平居中


<!-
块级元素居中 -->
块级元素水平居中

<!-
Flexbox 居中 -->
Flexbox 居中内容

<!-
表格居中 --> <表> 表格内容居中
<!-
中心图像 -->

你看，就是这样。
不要使用花哨的。
如果可以使用最简单的解决方案，就不要使用复杂的解决方案。
你可以参考我这1 0年掉坑的经验。

css怎么水平居中对齐css水平居中对齐怎么设置

昨天，在帮朋友调试网站时，遇到了一个奇怪的问题。
他的网站显示它居中，但我的有点偏离。
这让我想起了我学习 CSS 对齐的那些年。
为了理解这些，我在本地搭建了很多测试页面，一一尝试。

比如这种常见的居中方法就是写一个div，给它一个5 00px的宽度，里面放一个小div，并使用margin:0 auto。
简单吧？但有时你会发现，在某些旧版本的 IE 上这种效果有点不对劲。
我记得有一次我正在为客户创建一个页面。
客户用的是IE6 ，立刻就乱了。
我这才明白为什么要学这么多兼容的写作方法。

另一个例子是使用display:flex。
这个现在用得很多。
如果你写了一个大div并用flex布局，里面的小div会自动居中。
记得刚开始学习的时候，我会抓狂地写代码，在浏览器中调试，调整flex-grow和flex-shrink的值，一点一点地尝试。
有一次我尝试调整一个图标和文字很久，结果发现是flex-wrap属性没有设置正确。

还有变换translate（-5 0%）的使用，特别适合某些特殊场景。
我记得有一次制作了一个进度条。
进度条本身是一个容器，里面的指示条必须精确居中。
使用 margin 和 flex 很困难，所以我最终使用 Transform 来完成它。
当时我还写了一个小demo，录屏发到群里。
结果，一位同事在评论中询问为什么变换的 z-index 不起作用。

最好笑的是我用过一次display: table-cell，写代码的时候觉得很高级。
事实证明，有些浏览器的表格布局存在很多错误。
当我发送出去时，测试女孩说某部手机的显示有问题。
我发现特定浏览器的表格单元格实现有问题，最后将其改回margin auto。

等一下，我的电脑上有一个注释，比较了 9 种居中方法。
看来我还创建了一个浏览器兼容性测试表。
时间太久了，有些细节我都忘记了。
写文章谈论这些事情现在感觉就像昨天谈论一样遥远。

顺便问一下，您认为这些定制问题现在在前端框架中仍然很常见吗？或者它们都被flex和grid覆盖了？

css样式中怎么能让一行字水平居中显示