Используя собственный элемент (не родительский) для вычисления или процент в css, без javascript

Я экспериментировал с возможностью заставить элемент страницы перекрывать элементы по обе стороны от него и оставаться идеально расположенными между ними. Моим решением было объявить position:relative и установить отрицательные значения margin, примерно равные 50% ширины элемента, но ближайший я смог прийти к половине процента элемента от его родительской ширины:

<!DOCTYPE html>
<html>
 <head>
  <style>
  .clap {
   position:relative;
   margin:auto -16.66%; // This element share of the entire parent width = 33.33%
   color:#f00
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890<span class="clap">1234567890</span>1234567890</span>
  </center>
 </body>
</html>

Я пытаюсь найти только CSS-решение, которое будет использовать ширину самого элемента, а не ширину контейнера. Я не могу использовать JavaScript для этого, потому что планирую использовать его как исправление MathJaX, вставив его в команду \style. (Насколько я знаю, MathJaX не предоставляет встроенный код HTML или JavaScript в своих формулах, поэтому вы понимаете, почему это должно быть только CSS. Я знаю, что это возможно с помощью скриптов. Возможно ли это с помощью CSS, или это моя попытка безнадежной

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

.clap {
 position:absolute;
 display:inline-block;
 transform: translate(-50%,0);
 color:#f00                      // for contrast 
}

Я хотел бы показать вам результаты, но я не могу загрузить картинку. К сожалению.

Другое обновление. Решение, представленное выше, лучше всего работает в контексте HTML/CSS, но оно разбивается на MathJaX array, matrix или аналогичную табличную среду. В частности, если элемент слишком длинный, он зажимается с левой стороны. Относительное позиционирование перемещает элемент на полпути влево, но оставляет место, где оно было раньше! Любые идеи для его исправления?

ОТВЕТЫ

Ответ 1

Я видел современный трюк для центрирования элементов с помощью transform. (Если я понимаю основной вопрос)

element {
  position:relative;
  top:50%; // ^1
  transform:translateY(-50%); // ^2,3
}
  • Вы можете использовать top:50%; для вертикального и left:50%; для горизонтального.
  • Затем вы использовали бы translateY(-50%) для вертикального и translateX(-50%) для горизонтального центрирования.
  • Вам нужно использовать префиксы для transform. Я настоятельно рекомендую autoprefixer в вашем рабочем процессе.

Bonus:
Вы также можете использовать этот трюк для выравнивания элементов в нижней или правой части его родительского типа, например, в table-cell, используя 100% вместо 50% в css.

Ответ 2

Как размер элемента известен только после того, как он был оформлен, как стиль должен быть способен его использовать? Представьте себе: некоторый элемент имеет ширину 200% от собственной ширины (= двойной размер, чем "нормальный" ), установленный в CSS. Один из его детей имеет ширину, равную 100% от родителя (= наш элемент). Ширина элемента по умолчанию определяется его содержимым. Содержимое нашего элемента имеет ширину как сам элемент. Однако у нашего элемента нет ширины, так как мы ждем его получения по умолчанию, поэтому мы можем удвоить этот. Результат: Ничто никогда не получит никакой ширины.

Поэтому: То, что вы пытаетесь сделать, невозможно. Но CSS3 имеет calc, возможно, вы можете приблизиться к тому, что вы хотите использовать, используя его?

Ответ 3

Я не знаю, это то, что вы хотели сделать, но вот демо: http://cdpn.io/bgkDf

HTML

<div class="container">
  <div id="box-left"></div>
  <div id="box-overlap">
    <div id="box-overlap-inner"></div>
  </div>
  <div id="box-right"></div>
</div>

CSS

.container > div {
  height: 50px;
  float: left;
}
#box-left {
  width: 40%;
  background-color: red;
}
#box-right {
  width: 60%;
  background-color: green;
}
#box-overlap {
  width: 0;
}
#box-overlap-inner {
  position: relative;
  z-index: 10;
  height: 50px;
  width: 50px;
  transform: translate(-50%,0);
  background-color: rgba(0,0,255,.5);
}

Ответ 4

"Использование собственной ширины элемента для вычисления или процента" В общем:

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

В настоящий момент функция attr не работает в Chrome. Это было бы хорошо. Но вы можете использовать переменные, если вы сами устанавливаете родительский атрибут или можете использовать предопределенный. Таким образом, вы можете использовать функцию calc() для вычисления вашего дочернего атрибута.

Вот пример, используя определенный размер окна видового экрана, чтобы вычислить ширину элемента:

<!DOCTYPE html>
<html>
 <head>
  <style>
  :root {
     --module-size: 33vw;
   }

  .clap {
   display:inline-block;
   width: calc(var(--module-size) / 2);
   color:#f00;
   border: 1px solid;
  }
  </style>
 </head>
 <body>
  <center>
   <span style="display:inline-block">1234567890
    <span class="clap">1234567890</span>
   1234567890</span>
  </center>
 </body>

Это может использоваться многими интересными способами, чтобы оптимизировать ваш CSS. Например, с помощью стиля @media...