时间戳

首页 > 解决方案 > 段落内的 CSS 居中文本

css - 段落内的 CSS 居中文本

问题描述

如何在p内垂直居中文本？谢谢你。 在此处输入图像描述

标签： css

解决方案

Flexbox 解决方案——更现代的解决方案：

https://jsfiddle.net/2zqeL6g8/

的HTML：

<div class="todo">
  <div class="todo-left">
    <p>TODO 1</p>
  </div>
  <div class="todo-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
  </div>
</div>

CSS：

.todo {
  display: flex;
}

.todo-left {
  background: #ccc;
  padding: 0 15px;
  flex: 0 0 100px;
  
  display: flex;
  align-items: center;
}

.todo-right {
  background: #f5f5f5;
  padding: 0 15px;  
  flex: 1;
  
  display: flex;
  align-items: center;
}

CSS 表格解决方案 - 较旧的方法，但适用于较旧的浏览器 ie8+：

https://jsfiddle.net/2zqeL6g8/2/

的HTML：

<div class="todo">
  <div class="todo-row">
    <div class="todo-cell-left">
      <p>TODO 1</p>
    </div>
    <div class="todo-cell-right">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rhoncus aliquam egestas.</p>
    </div>
 </div>
</div>

CSS：

.todo {
  display: table;
  border-collapse: collapsed;
  width: 100%;
}

.todo-row {
  display: table-row;
}

.todo-cell-left,
.todo-cell-right {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px;
}

.todo-cell-left {
  background: #ccc;
  width: 100px;
}

.todo-cell-right {
  background: #f5f5f5;
}

推荐阅读