html - 文本与图像宽度对齐

Question

有没有办法让文本与图像的左右两侧对齐而不换行或溢出？使用下面的当前代码，文本不会与边缘对齐，并且最终可能会太小或太大，具体取决于用户设置。

.logo-table {
    margin-left: 50px;
    position: absolute;
    top: 20px;
    width: 195px;
}

.logotext {
    color: #fff;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}

.headerlogo {
    width: 195px;
}


<div class="logo-table">



<img src="/images/header.png" class="headerlogo" align="middle">


      <p class="logotext">Neque porro quisquam est</p></td>

</div>

Answer 1

text-align: justify; 会将文本对齐到元素的任一侧，因此这适用于您的情况。

我添加了 text-align-last: center; 所以文本也居中 - .headerlogo 的宽度应该是 100%，所以你不需要必须写两次。

.logo-table {
  margin-left: 50px;
  position: absolute;
  top: 20px;
  width: 150px;
}

.logotext {
  font-size: 1em;
  font-weight: bold;
  text-align: justify;
  text-align-last: center;
}

.headerlogo {
  width: 100%;
}

<div class="logo-table">
  <img src="https://csswizardry.com/logo.png" class="headerlogo" align="middle">
  <p class="logotext">Neque porro quis quam est</p>
</div>