Поместить элемент HTML по центру

Question

Каков правильный способ размещения элемента HTML в соответствии с дескриптором центра?

В этом примере:

XXXXXXXXX 
     | 
     | 
    123px 

Предположим, что элемент должен быть положение, в абсолютном положении left: 123px;, но текст должен быть центром в этой точке, не начать на него. Текст элемента является динамическим, поэтому я не могу установить на нем статический отрицательный margin-left.

Есть ли чистый способ CSS для достижения этого? Способ JS измерения offsetWidth, а затем установка left после расчета width/2 не будет работать в моем случае из-за различных ограничений.

Answer 1

Это довольно легко добиться того, что и есть несколько способов сделать это. Поскольку вы не размещали какую-либо конструкцию HTML для своего примера, я просто воспользуюсь некоторыми.

Уловка состоит в том, чтобы иметь родительский элемент inline-block, который имеет желаемое смещение (123px), и внутри этого элемента у вас будет другой элемент встроенного блока с левым полем -50%. Поместите обоих родственников, и у вас будет тот эффект, который вы ищете.

#container { 
 
    position: relative; 
 
} 
 
#line { 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 123px; 
 
    position: absolute; 
 
    border-left: 1px solid red; 
 
} 
 
#text { 
 
    left: 123px; 
 
    top: 50px; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
#text p { 
 
    position: relative; 
 
    background: green; 
 
    margin-left: -50%; 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
<div id="line"> 
 
&lt;-- 123px 
 
</div> 
 
<div id="text"> 
 
<p> 
 
This is some dynamic text<br>the div has no absolute set width. 
 
</p> 
 
</div></div>

Есть и другие способы, как упоминалось, вероятно, зависит от общей компоновки/HTML структуры. Я бы определенно взглянул на свойства гибкой коробки, это также может быть и здесь.

Если вы хотите поиграть с ним, вот fiddle.

Answer 2

Некоторые из различных способов сделать это с помощью CSS:

Если элемент является блок:

.element{ 
    width: 200px; /* Full width */ 
    left: 50%; 
    margin-left: -100px; /* Half width */ 
    position: absolute; 
    display: block; 
} 

или, если вы используете CSS3:

.element{ 
    width: 200px; /* Full width */ 
    left: calc(50% - 100px); 
    position: absolute; 
    display: block; 
} 

Вы также можете использовать не абсолютный подход, но позиция родительского элемента s hould быть относительным:

.element-parent{ 
    position: relative; 
} 

.element-parent .element{ 
    margin: 0 auto; 
} 

Если вы используете текст-ориентированный элемент (встроенный блок), это работает с IE 7+:

.element-parent{ 
    text-align: center; 
} 

.element-parent .element{ 
    display: inline-block; 
} 

Answer 3

Один вешать, чтобы установить преобразование translateX -50%

p { 
 
    position: relative; 
 
    display: inline-block; 
 
     left: 100px; 
 
    transform: translateX(-50%); 
 
}

<p>ONE</p> 
 
<br> 
 
<p>TWO, LONGER</p> 
 
<br> 
 
<p>THREE, the longest</p>