CSS文字竖排效果且垂直居中水平居中

要实现CSS文字竖排效果且垂直居中水平居中，可以使用以下代码：

<div class="wrapper">
  <p>竖排文字</p>
</div>

.wrapper {
  width: 100px;
  height: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

其中，`.wrapper` 为包裹竖排文字的容器，通过 `display: flex;` 和 `align-items: center; justify-content: center;` 实现垂直居中和水平居中。而 `writing-mode: vertical-rl;` 和 `text-orientation: mixed;` 则实现了文字竖排效果。

相关问题

css文字竖排效果且垂直居中水平居中

实现文字竖排效果，可以使用CSS的writing-mode属性，设置为vertical-rl（从上到下，从右到左）。垂直居中可以使用flex布局，设置父元素display:flex; align-items:center;。水平居中可以使用text-align:center;，如下所示：

HTML代码：

<div class="vertical-text">
  <p>竖排文字</p>
</div>

CSS代码：

.vertical-text {
  writing-mode: vertical-rl; /* 文字竖排 */
  display: flex; /* 父元素flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 设置高度，方便演示 */
}
.vertical-text p {
  margin: 0; /* 去除默认的外边距 */
  text-align: center; /* 水平居中 */
  font-size: 24px; /* 设置字体大小 */
  line-height: 1.5; /* 设置行高，让文字竖排更美观 */
}

效果如下图所示：


一列文字加上文字图标，竖排显示再网页右半部分

在网页设计中，将一列文字与文字图标竖直排列并展示在页面右侧，通常可以采用一些CSS技术和定位技巧来实现。以下是一个基本步骤：

1. **HTML结构**：
创建一个包含文字和图标的`<div>`元素，并赋予它一个特定的类名，例如 `.icon-column`。

<div class="icon-column">
  <span class="icon">!</span>
  <p>这是一些描述性的文字</p>
</div>

2. **CSS样式**：
使用Flexbox或者Grid来管理布局，将`.icon-column`设为垂直堆叠(`flex-direction: column`)，并将其定位在右边(`position: relative; right: auto; left: 0%;` 或者 `margin-left: calc(50% - [图标宽度] / 2)`)。

   .icon-column {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 50%;
     margin-left: 50%;
     /* 如果图标固定宽度 */
     .icon {
       margin-bottom: 5px;
     }
   }

3. **调整图标位置**：
如果图标宽度已知，可以通过负margin调整图标使其居中对齐文字下方。如果图标大小动态变化，可以使用伪元素`::before`或`::after`来保持一致的间距。

.icon-column .icon::before {
  content: "!";
  vertical-align: middle;
}

4. **响应式设计**：
使用媒体查询，针对不同设备屏幕大小调整`.icon-column`的宽度，确保在小屏幕设备上能适当地调整图标和文字的位置。

@media (max-width: 768px) {
  .icon-column {
    width: 100%;
    margin-left: 0;
  }
}