Абсолютный текст центра, но выровненный по левому краю

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

У меня есть p который содержит две строки содержимого, разделенные br. Я хочу, чтобы ширина линии была шириной наибольшего количества контента, а также для того, чтобы эта линия была центрирована. Следующая строка должна быть выровнена по тексту слева.

Это Js скрипку показывает то, что я до сих пор: https://jsfiddle.net/hnox2t18/

AS вы можете видеть, p не всегда растягиваться быть ширина контента, а не разделив первую строку вверх. p должен быть шириной содержимого до br и центрироваться по этой ширине.

CSS

.home-slider .home-slide { 
    position: relative; 
} 
.home-slider img { 
    width: 100%; 
} 
.home-slider p { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
} 
.home-slider span { 
    font-weight: bolder; 
}

HTML

<div class="home-slider"> 
    <div class="home-slide"> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=0&w=800&h=400"> 
     <p>Over <span>1,500</span> ports, <span>3000</span> terminals<br />and  <span>6,800</span> berths</p> 
    </div> 
</div>

источник

2016-03-24 Sam Willis

Можете ли вы использовать flexbox? – wiesson

Мы должны поддерживать старые браузеры, к сожалению, поэтому стараемся держаться подальше от flexbox –

Просто используйте white-space:nowrap; на p теге.

JSFiddle Demo

p { 

    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
    white-space:nowrap; 
}

Adjust, как требуется в запросах медиа.

источник

2016-03-24 11:39:16

Вы можете создать ограждающую DIV, который будет центром и включать ваш р внутри.

CSS

.overlay { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

p { 
    font-family: "proxima-nova", Arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 40px; 
    color: #ffffff; 
    line-height: 1em; 
}

HTML

...  
<div class="overlay"><p>Over <span>1,500</span> ports, <span>3000</span> terminals<br />and <span>6,800</span> berths</p></div> 
...

Fiddle: https://jsfiddle.net/e4tqcs49/

источник

2016-03-24 11:19:58 wiesson

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

Добавить ширину к p? – wiesson

p нужно создать свою собственную ширину, чтобы она была по центру горизонтально –

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

вы должны установить свойство ширины, чтобы сделать ваш p достаточно большим, чтобы соответствовать. 725px должен работать с вашим размером шрифта. если его меньше, первая строка ломается. Но это решение не реагирует.

.home-slider p { 
    width: 725px;

В конце концов вы также должны отрегулировать размер шрифта.

источник

2016-03-24 11:29:41

Я использую "сброс CSS" функции;):

* { 
    margin: 0; 
}

<p> метки имеют поля

источник

2016-03-24 11:37:18

Абсолютный текст центра, но выровненный по левому краю

ответ

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