Выравнивание текста до середины его рамки рамки

Можно ли выровнять динамический текст до середины его левой боковой коробки?Выравнивание текста до середины его рамки рамки

Начальное отображение элементов без CSS выглядит так, как все элементы присоединяются к той же границе:

 Text 
     | 
     Another text

Но Im пытается добиться этого эффекта:

 Text 
     | 
    Another text

Я не не знаю, как правильно объяснить это, поэтому я создал JSFiddle, чтобы показать его: https://jsfiddle.net/pkpy27oh/

Я хочу, чтобы центр текста над и под div с бо rder. Отрицательное поле может быть скорректировано, если вы знаете пространство, в котором он будет принимать статическую строку, но с динамическими строками это не то, что можно сделать с предопределенными отрицательными полями. Я пытаюсь сделать это, просто используя CSS, без JavaScript.

Я попытался установить максимальную ширину, выровнять текст посередине в свой контейнер и затем установить отрицательный запас на половину этой максимальной ширины, но мне интересно, есть ли лучший способ сделать это.

источник

2016-10-07 Masta

Я запутался. Может быть, это не имеет большого смысла или, может быть, я что-то упустил? Что случилось с 'text-align: center'? – Albzi

@Albzi 'text-align: center;' не будет центрировать его '

', потому что он не имеет текста и является блоком не встроенным или встроенным блоком. Но если он сделал границу div inline-block, то это будет центр – zgood

Вы имеете в виду это? https://jsfiddle.net/pkpy27oh/10/ – TylerH

Вы можете использовать дисплей: встроенный блок и выравнивания текста: центр:

Example Updated

<div class="container"> 
    <div class="inline-block"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; display: inline-block;">&nbsp;</div> 
    <div>Longer text</div> 
    </div> 
</div> 

.container { 
    margin: 10px 50px; 
    text-align: left; 
} 

.inline-block { 
    display: inline-block; 
    text-align: center; 
    transform: translateX(-50%); 
}

источник

2016-10-07 15:32:09

Это странное требование наверняка. Если transform:translateX приемлемо для ваших требований вы можете попробовать это:

.container { 
 
    margin: 10px 50px; 
 
} 
 

 
.offset { 
 
    display:inline-block; 
 
    transform: translateX(-50%); 
 
}

Problem: 
 

 
<div class="container"> 
 
    <div class="offset">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div class="offset">Longer text</div> 
 
</div> 
 

 
Expected result: 
 

 
<div class="container"> 
 
    <div style="margin-left: -15px">Text</div> 
 
    <div style="border-left: 1px solid #000;">&nbsp;</div> 
 
    <div style="margin-left: -35px">Longer text</div> 
 
</div>

display:inline-block сворачивает элемент вниз к его ширине кратчайшим и transform:translateX(-50%) смещает его на половину его ширины.

источник

2016-10-07 15:32:45

Просто нужно центрировать предметы в контейнере и дать div с границей шириной 1px.

<div class="container" style="text-align: center;"> 
    <div>Text</div> 
    <div style="border-left: 1px solid #000; width: 1px; margin-left: auto; margin-right: auto;">&nbsp;</div> 
    <div>Longer text</div> 
</div>

https://jsfiddle.net/pkpy27oh/8/

источник

2016-10-07 15:33:34 Andrew

Выравнивание текста до середины его рамки рамки

ответ

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