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％，因此您不必再写两次。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

文本与图像宽度对齐

1 个答案: