Запретить перемещение дочернего элемента за пределы родителя при изменении размера браузера?

У меня есть кнопка с логотипом на нем. Похоже, что это нормально:Запретить перемещение дочернего элемента за пределы родителя при изменении размера браузера?

[ Logo Centered Text ]

Кнопка получил text-align: center и логотип позиционирован относительно быть размещены на левой стороне кнопки в любое время. Однако, когда размер этой кнопки уменьшается из-за изменения размера окна браузера, логотип, из-за его расположение, крадется из левой стороны кнопки:

Lo[go Centered Text ]

Как сделать логотип пребывание положить в левой части кнопки, независимо от размера кнопки?

.button { 
    text-align: center 
} 

.logo { 
    position: relative; 
    right: 125px; 
}

Вот скрипка, который демонстрирует проблему: https://jsfiddle.net/83vfft19/

источник

2015-10-28 Dylan Richards

Это из-за свойства 'right', которое у вас есть. Лучше, если вы можете создать аналогичную демонстрацию здесь. Вдоль вашего HTML/CSS. – divy3993

Вы попробовали абсолютное позиционирование? –

Можете ли вы опубликовать фрагмент или скрипт, показывающий, как это должно выглядеть? Я могу думать о нескольких различных решениях, но некоторые из них могут быть не соответствующими вашим требованиям. – Shaggy

Если установить родительскую позицию .button к родственнику, вы должны быть в состоянии абсолютно позиционировать .logo ребенка внутри родителя.

источник

2015-10-28 18:47:13

Эй, спасибо! Мы приближаемся. Похоже, что это будет работать в большинстве случаев. Тем не менее, для моего случая логотип возвращается в положение около центра кнопки на меньших размерах. Любое понимание? –

Запретить перемещение дочернего элемента за пределы родителя при изменении размера браузера?

ответ

Смежные вопросы