| 面试官：请实现单行文本居中，多行文本左对齐？ | 您所在的位置：网站首页 › cad线条居中对齐 › 面试官：请实现单行文本居中，多行文本左对齐？ |
面试官：请实现单行文本居中，多行文本左对齐？
|
这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战 什么是单行文本居中，多行文本左对齐？为了准确的向大家阐述，这是什么意思？我特意做了一个GIF动图，这样能够更好的帮助大家理解什么是单行文本居中，多行文本左对齐。 之所以要设置inline-block是因为这样可以让元素的宽度有子元素决定。 HTML结构 测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。 复制代码 css结构 .father { height: 300px; margin: 0 auto; border: 1px solid red; } .text { display: inline-block; position: relative; left: 50%; transform: translateX(-50%); } 复制代码 实现方式2：父级text-align: center，子级inline-block + text-align: left这种方式的实现原理是，当子元素的宽度没有父元素的宽度宽的时候，此时应用的是行内块元素和左对齐，但是父盒子设置了居中对齐，所以显示的是居中，一旦子元素的宽度达到了两行，第二行就开始应用左对齐了。 HTML结构 测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。 复制代码 CSS样式 .father { height: 300px; margin: 0 auto; border: 1px solid red; text-align: center; } .text { display: inline-block; text-align: left; } 复制代码 实现方式3：table布局 + margin: 0 auto; HTML结构 测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。 复制代码 CSS样式 .father { height: 300px; margin: 0 auto; border: 1px solid red; } .text { display: table; margin: 0 auto; } 复制代码 实现方式4：flex布局 + justify-content: center HTML结构 测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。 复制代码 CSS样式 .father { height: 300px; margin: 0 auto; border: 1px solid red; } .text { display: flex; justify-content: center; } 复制代码 实现方式5：grid布局 + justify-items: center .text { display: grid; justify-items: center; } 复制代码单行文本居中，多行文本左对齐，是一道非常考查候选人CSS基本功的题目，从这个问题可以看出，我们的CSS基础还仍待提高。 |
【本文地址】
公司简介
联系我们
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |