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

相关文章推荐

无邪的橡皮擦 · python 绘制图中字体怎么加粗 - ...· 5 月前 ·

知识渊博的斑马 · 【气象模式】WRF、python-WRF融合 ...· 1 年前 ·

飘逸的人字拖 · C# Reflection反射机制 - ...· 1 年前 ·

发怒的小蝌蚪 · JSF简介 - CoderZh - 博客园· 1 年前 ·

奔跑的书包 · File、FileReader、Base64 ...· 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基础还仍待提高。