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

相关文章推荐

玩命的牛肉面 · java 判断一个时间是不是今天的时间范围内· 6 月前 ·

强悍的红烧肉 · scala 与 java泛型数组-阿里云开发者社区· 8 月前 ·

完美的杨桃 · python groupby 函数 ...· 1 年前 ·

鬼畜的雪糕 · 模板中的变量 - Azure ...· 1 年前 ·

光明磊落的烤面包 · java交换数组中两个元素的位置-掘金· 1 年前 ·

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基础还仍待提高。