css让div内的文字从上到下，而不是垂直居中

在CSS中，如果你想让`<div>`内的文本从上到下排列，而不是默认的垂直居中对齐，你需要改变其`display`属性以及调整`vertical-align`。通常情况下，如果一个`<div>`元素包含`inline`或`block`类型的元素，如文本，它会被视为块级元素，而默认的垂直对齐通常是`baseline`（对于行内元素）或`middle`（对于块级元素）。

下面是一个例子，假设你想要`div`内的文本自上向下显示，你应该将其设置为`display: flex`或者`display: grid`，然后用`align-items: flex-start`或`align-items: start`（仅适用于Flex布局），或者`align-content: flex-start`来控制起始位置：

div {
  display: flex; /* 或者 display: grid; */
  align-items: flex-start; /* 或者 align-items: start; 对于flex */
  /* 另外，如果是grid，也可以用align-content: flex-start; */
}

这将会使得`<div>`内的文本从顶部开始堆叠。

相关问题

css让div中icon垂直居中

要在CSS中使`<div>`元素内的图标垂直居中，你可以使用多种方法，这里提供两种常见的方法：

1. **Flexbox** (适用于现代浏览器)
如果`<div>`的容器设置了`display: flex;`，并且你是垂直居中单个项目，可以这样做：

   .container {
     display: flex;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中，这里是不必要的，因为只有一个项目 */
   }
   
   .container > i { /* 或者直接对需要居中的元素 */
     font-size: your-icon-font-size;
   }

2. **Grid布局** (同样适用于现代浏览器)
如果你想采用Grid布局，设置类似的方式：

   .container {
     display: grid;
     place-items: center; /* 等同于align-items和justify-items: center */
   }
   .container > i {
     font-size: your-icon-font-size;
   }

3. **内联样式**
如果你的图标是一个行内元素（例如`<i>`标签），可以利用`vertical-align: middle;`:

   <div style="display: inline-block;">
     <i class="your-icon" style="vertical-align: middle;">...</i>
   </div>

或者给`.your-icon`添加一个包含`line-height`的`style`属性：

   .your-icon {
     line-height: normal; /* 或者设置一个具体的值等于div的高度 */
     vertical-align: middle;
   }

css 将div内的元素垂直居中

可以使用 flex 布局将 div 内的元素垂直居中。具体做法如下：

1. 将 div 设置为 flex 布局：

display: flex;

2. 设置 flex-direction 属性为 column，使其变为竖直方向排列：

flex-direction: column;

3. 使用 justify-content 和 align-items 属性来分别设置主轴和侧轴的对齐方式，使其在竖直方向上居中对齐：

justify-content: center;
align-items: center;

完整代码如下：

<div style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
  <p>这是一段文本</p>
  <img src="example.jpg" alt="示例图片">
</div>

这样就可以实现将 div 内的元素垂直居中了。