Html 如何对齐文本中心-不使用css

我试图使用下面的代码对齐文本中心，但它不起作用。我的代码笔和代码：

正文{
填充：0；
保证金：0；
}
.集装箱{
宽度：1200px；
溢出：自动；
保证金：240px自动；
背景：透明；
位置：相对位置；
}
.集装箱{
位置：相对位置；
浮动：左；
宽度：计算（400px-30px）；
高度：计算（300px-30px）；
背景：黄色；
溢出：隐藏；
利润率：15px；
边界半径：10px；
框大小：边框框；
}
.container.box.icon{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：红色；
过渡：0.5s；
z指数：1；
}
.container.box:悬停.icon{
顶部：20px；
左：计算（50%-40px）；
宽度：80px；
高度：80px；
边界半径：50%；
}
.container.box.icon.fa{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字号：80px；
颜色：#fff；
过渡：0.5s；
}
.container.box:hover.icon.fa{
字体大小：40px；
}
.container.box.content{
位置：绝对位置；
顶部：100px；
高度：计算（100%-100px）；
填充：20px；
框大小：边框框；
过渡：0.5s；
文本对齐：居中；
}

搜索
sadfdffoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen

您的文本对齐得很好，问题是，

.content

的宽度与框的宽度不同。添加

宽度：100%

添加到

.content

中，并且它应该是固定的（还可以减小p的大小，因为它太长）

---

您的文本对齐得很好，问题是，

.content

的宽度与框的宽度不同。添加

宽度：100%

添加到

.content

中，并且它应该是固定的（还可以减小p的大小，因为它太长）

---

将

width:100%

添加到

content

元素中，以适应容器中绝对定位的元素-请参见下面的演示：

正文{
填充：0；
保证金：0；
}
.集装箱{
宽度：1200px；
溢出：自动；
保证金：240px自动；
背景：透明；
位置：相对位置；
}
.集装箱{
位置：相对位置；
浮动：左；
宽度：计算（400px-30px）；
高度：计算（300px-30px）；
背景：黄色；
溢出：隐藏；
利润率：15px；
边界半径：10px；
框大小：边框框；
}
.container.box.icon{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：红色；
过渡：0.5s；
z指数：1；
}
.container.box:悬停.icon{
顶部：20px；
左：计算（50%-40px）；
宽度：80px；
高度：80px；
边界半径：50%；
}
.container.box.icon.fa{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字号：80px；
颜色：#fff；
过渡：0.5s；
}
.container.box:hover.icon.fa{
字体大小：40px；
}
.container.box.content{
位置：绝对位置；
顶部：100px；
高度：计算（100%-100px）；
填充：20px；
框大小：边框框；
过渡：0.5s；
文本对齐：居中；
宽度：100%；/*已添加*/
}

搜索
sadfdffoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen

将

宽度：100%

添加到

内容

元素中，以将绝对定位的元素放入其容器中-请参见下面的演示：

正文{
填充：0；
保证金：0；
}
.集装箱{
宽度：1200px；
溢出：自动；
保证金：240px自动；
背景：透明；
位置：相对位置；
}
.集装箱{
位置：相对位置；
浮动：左；
宽度：计算（400px-30px）；
高度：计算（300px-30px）；
背景：黄色；
溢出：隐藏；
利润率：15px；
边界半径：10px；
框大小：边框框；
}
.container.box.icon{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：红色；
过渡：0.5s；
z指数：1；
}
.container.box:悬停.icon{
顶部：20px；
左：计算（50%-40px）；
宽度：80px；
高度：80px；
边界半径：50%；
}
.container.box.icon.fa{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
字号：80px；
颜色：#fff；
过渡：0.5s；
}
.container.box:hover.icon.fa{
字体大小：40px；
}
.container.box.content{
位置：绝对位置；
顶部：100px；
高度：计算（100%-100px）；
填充：20px；
框大小：边框框；
过渡：0.5s；
文本对齐：居中；
宽度：100%；/*已添加*/
}

搜索
sadfdffoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfensadfdfoiljwkjfen

这是因为它是一个单词，而且

内容也有一些
填充
。。。也许你想使用
单词break:break all
，这是因为它是一个单词，而且
内容也有一些
填充。。。也许您想使用
单词break:break all
.container .box .content {
           position:absolute;
           width: 100%;
           top:100px;
           height:calc(100% - 100px);
           padding:20px;
           box-sizing:border-box;
           transition:0.5s;
           text-align:center;
        }