Спозиционировать элемент в нужное место по горизонтали, не выводя из потока

[Launder]

Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).

Для второго элемента указано свойство:

        padding-left: calc(50% - 15rem);    /* тут может быть и 150px*/

При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),

если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).

И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.

Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.

В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.

В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.

В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...

Каким образом приручить эти элементы?

 

[AlexZaw]

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Ну или не мучиться, а выравнивать его с помощью js ?

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

[Launder]

12 часов назад, AlexZaw сказал:

А если разделить container на две части по 50% и block-center просто прижать к левой части?

Да нет, понятно, что так можно сделать, да и много как по-другому сделать можно. Тут вопрос именно в том, чтоб html трогать по-минимуму и разобраться в возможностях CSS.

 

12 часов назад, AlexZaw сказал:

Ну или не мучиться, а выравнивать его с помощью js ?

Ну так можно наверняка.

 

12 часов назад, AlexZaw сказал:

Хотя в любом случае может возникнуть ситуация когда количество текста в block-1 в сочетании с размером шрифта сыграют злую шутку и элементы наложатся друг на друга

В этом Вы абсолютно правы. Надеяться на контент, в любом случае, не вполне правильный подход, на другой ОС, в другом браузере, что-то может отобразиться немного по-другому. Но с другой стороны, если наверняка знаешь, что контент будет меняться редко, то, наверное, можно воспользоваться этим костылём...

[AlexZaw]

Опираясь на свои знания css, на мой взгляд, самый адекватный способ это менять маржин у block-center с помощью js, хотя вчера видел пару игр  на чистом html+css, и теперь не уверен что вашу задумку нельзя реализовать с помощью css

[Launder]

Вот и я не уверен. Вот и ломаю теперь голову Возможно Вы и правы, и оно того не стоит...

Edited March 2, 2018 by Launder