2
<style>
    div {
       background: lightgray;
       position: relative;
       height: 100px;
       width: 100px;
       left: 100px;
    }

    span {
        position: absolute;
        width: auto;
        background: red;
        padding: 3px 10px;
        white-space: nowrap;
    }
</style>

<div>
    <span>Тут произвольный текст</span>
</div>

Нужно выровнять по горизонтали блок с текстом так, чтобы был по центру, так (заранее скажу, что вместо div будет ячейка таблицы TD):

span - необязательно должен быть absolute, если есть другие варианты, то подойдет. Суть в том, чтобы если ширина блока текста больше чем сама ячейка, то блок с текстом выходил за границы блока таблицы, как на первой картинке.

введите сюда описание изображения

введите сюда описание изображения

2 ответа 2

2

.parent-box {
  background: lightgray;
  position: relative;
  height: 100px;
  width: 100px;
}

.child {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  background: red;
  padding: 3px 10px;
  white-space: nowrap;
}
<table>
  <tr>
    <td>
      <span>Aloha</span>
    </td>
    <td class="parent-box">
      <span class="child">Тут произвольный текст</span>
    </td>
    <td></td>
  </tr>
</table>

2
  • от души, бро, обнял
    – qweqwe
    7 июн 2018 в 7:20
  • Рад помочь, обращайтесь)) 7 июн 2018 в 7:32
0

вам нужно в коде прописать блоки в последовательности серый<td> потом ниже тега </table> Создайте красный блок Div и добавьте стиль margin-top:-??px; (размер пикселей сами подгоните так чтобы красный блок лег на td ) и у вас получиться накладывание красного независимого блока по верх серого и при растяжке текстом красного блока он выйдет за рамки серого

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.