li中的文字左右和上下居中怎么写

可以使用 CSS 属性 `text-align: center` 和 `vertical-align: middle` 来实现文字的左右居中和上下居中。

如下所示：

<div style="display: table-cell; text-align: center; vertical-align: middle;">居中的文字</div>

其中，`display: table-cell` 用于将 `div` 元素以表格单元格的形式展示，以便使用 `vertical-align` 属性实现垂直居中。 `text-align: center` 则用于实现水平居中。

相关问题

li中的文字上下居中怎么写

可以使用CSS的flex布局来实现文本的上下居中。具体实现方法如下：

HTML代码：

<div class="container">
  <div class="content">
    <p>这是一段文本，需要上下居中显示。</p>
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 200px; /* 容器高度 */
  background-color: #f5f5f5; /* 容器背景色 */
}

.content {
  text-align: center; /* 文本水平居中 */
}

以上代码会将文本垂直居中，并水平居中显示在一个高度为200px的容器中。如果需要调整容器的高度，只需要修改`height`属性即可。

ul li内的文字上下左右居中

在HTML中，如果你想要让`<ul>`列表项 (`li`) 内的文字在水平和垂直方向上都居中，可以结合CSS样式来实现。通常情况下，你可以使用以下方法：

1. **内联元素**:
对于行内元素，如`<span>`，可以直接设置 `text-align: center;` 属性使其水平居中，并使用 `vertical-align: middle;` 或者设置 `line-height` 相同于 `li` 的高度来垂直居中。

<ul>
    <li><span>文字内容</span></li>
</ul>

<style>
    ul {
        list-style-type: none;
    }
    li span {
        display: inline-block; /* 或 inline */
        text-align: center;
        vertical-align: middle;
        line-height: normal; /* 如果需要针对字体大小调整高度 */
    }
</style>

2. **块级元素**:
对于块级元素，例如默认的`<p>`或自定义的`<div>`，则可能需要额外的布局技巧，比如 flexbox 或 grid。如果所有`li`都有相同的宽度，可以使用 `display: flex; justify-content: center; align-items: center;`。

<ul style="list-style-type: none;">
    <li style="position: relative;"> <!-- 添加定位以便应用样式 -->
        <div class="content">
            文字内容
        </div>
    </li>
</ul>

<style>
    .content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* 或者适应父元素宽度 */
    }
</style>

记得在实际应用中根据需求调整样式，例如考虑响应式设计和浏览器兼容性。