面试官：请实现单行文本居中，多行文本左对齐？__文本左对齐怎么设置

相关文章推荐

曾深爱过的蛋挞 · 使用 Spring Boot 构建 ...· 2 年前 ·

坐怀不乱的大葱 · 用js实现增加一行、删除一行，添加序号，而且 ...· 2 年前 ·

销魂的自行车 · 浏览器兼容性问题总结 - 简书· 2 年前 ·

乐观的番茄 · 用 Python 搭建最简单的 http ...· 2 年前 ·

暴走的单车 · DeepLearning: ...· 2 年前 ·

HTML结构

  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>
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结构  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>
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结构  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>
CSS样式.father {
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
.text {
  display: table;
  margin: 0 auto;
实现方式4：flex布局 + justify-content: center 
HTML结构  <div class="father">
    <div class="text">测试单行文字居中，多行文本左对齐。测试单行文字居中，多行文本左对齐。</div>
  </div>
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基础还仍待提高。