html - 如何使用 CSS 对齐居中文本？

<分区>

我有一个包含文本的 div 标签，我想将这个 div 的内容垂直居中对齐。

这是我的 div 样式:

 div {
     height: 200px;
     line-height: 200px;
     text-align: center;
     border: 2px dashed #f69c55;
   }
   span {
     display: inline-block;
     vertical-align: middle;
     line-height: normal;
   }

这是我的html

 <div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

我想要如下图所示的文字:-

i.stack.imgur.com/a5wQe.png

最佳答案

Giving display:table to div and display:table-cell to span will do the trick .

div {
     

     text-align: center;
     border: 2px dashed #f69c55;
     display:table;
     height:300px;
   }
   span {
     display: table-cell;
     vertical-align: middle;
   
   }

<div>
   <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis.</span>
 </div>

关于html - 如何使用 CSS 对齐居中文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43555508/

上一篇：html - 自动调高div

下一篇：javascript - 可折叠的 div - 删除图片保持标题

相关文章：

php - foreach 在 HTML 中创建重复表

javascript - 是 PHP include() 还是 JS src 更快地包含文件？

css - polymer 核心动画页面如何使用可滚动内容设置背景

javascript - 将事件类添加到菜单部分

html - 如何使用 object-fit 将图像叠加到另一个图像的 Angular 落

html - 悬停时使用 CSS 更改 div 位置

jquery - 悬停时显示重叠/堆叠背景

html - 如何防止 Firefox 在更改背景颜色时将垂直滚动条添加到选择下拉列表中？

html - 如果我的用户没有我的网站使用的字体，他们如何自动下载它？

javascript - 试图在 javascript 中做一个简单的悬停？