Вертикально и горизонтально центрирующий текст в круге в CSS (например, значок уведомления iPhone)
-
22-10-2019 - |
Вопрос
Я ищу способ сделать поперечный iPhone, похожий на iPhone значок в CSS3. Очевидно, я хотел бы использовать один Div для этого, но альтернативные решения были бы в порядке. Важным фактором является то, что он должен быть горизонтально и вертикально центрирован во всех браузерах.
Интересная проблема дизайна об этих уведомлениях заключается в том, что они не могут иметь указанную ширину (высота установлена) - они должны иметь возможность обрабатывать [в рисунке ASCII] (1) и (1000), где (1000) не является идеально округлым кругом , но вместо этого больше похоже на капсулу.
РЕДАКТИРОВАТЬ: Дополнительные ограничения (от Стивена):
- Нет JavaScript
- Никакого поверка свойства дисплея в табличную клетку, которая имеет сомнительный статус поддержки
Решение
Горизонтальное центрирование легко: text-align: center;
. Анкет Вертикальное центрирование текста внутри элемента может быть сделано путем настройки line-height
Равно от высоты контейнера, но это имеет тонкие различия между браузерами. На небольших элементах, как значок уведомления, они более выражены.
Лучше установить line-height
равно font-size
(или немного меньше) и используйте прокладку. Вам придется отрегулировать свой рост, чтобы приспособиться.
Вот единственный, сингл. <div>
Решение, которое выглядит красиво iPhone. Они расширяются с содержанием.
Демонстрация: http://jsfiddle.net/thindingstiff/mlw47/
Выход:
CSS:
.badge {
background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
background-color: red;
border: 2px solid white;
border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
box-shadow: 1px 1px 1px black;
color: white;
font: bold 15px/13px Helvetica, Verdana, Tahoma;
height: 16px;
min-width: 14px;
padding: 4px 3px 0 3px;
text-align: center;
}
HTML:
<div class="badge">1</div>
<div class="badge">2</div>
<div class="badge">3</div>
<div class="badge">44</div>
<div class="badge">55</div>
<div class="badge">666</div>
<div class="badge">777</div>
<div class="badge">8888</div>
<div class="badge">9999</div>
Другие советы
Если у вас есть контент с неизвестной высотой, но вы знаете высоту контейнера. Следующее решение работает очень хорошо.
HTML
<div class="center-test">
<span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores
nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit
recusandae ratione.</p>
</div>
CSS
.center-test {
width: 300px;
height: 300px;
text-align:
center;
background-color: #333;
}
.center-test span {
height: 300px;
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
}
.center-test p {
display: inline-block;
zoom: 1;
*display: inline;
vertical-align: middle;
color: #fff;
}
ПРИМЕРhttp://jsfiddle.net/thenewconfection/eytvn/
Один получен для Ньюби, чтобы показать: inline-block; [SPAN] и [P] не имеют HTML White Space, чтобы пролет не занимал никакого места. Также я добавил в CSS Hack для отображения встроенного блока для IE. Надеюсь, это кому -то поможет!
Интересный вопрос! В то время как на горизонтальном и вертикальном центре есть много руководств, и вертикально центрирует, авторитетное отношение к предмету, где центрированный DIV имеет непрерывную ширину, заметно отсутствует.
Давайте применим некоторые основные ограничения:
- Нет JavaScript
- Не замолчать свойство дисплея
table-cell
, который имеет сомнительный статус поддержки
Учитывая это, мой вход в драку - это использование inline-block
Свойство отображения горизонтально центрировать пролет в пределах абсолютно позиционированного Div предопределенной высоты, вертикально центрированный внутри родительского контейнера в традиционном top: 50%; margin-top: -123px
мода.
Разметка: div > div > span
CSS:
body > div { position: relative; height: XYZ; width: XYZ; }
div > div {
position: absolute;
top: 50%;
height: 30px;
margin-top: -15px;
text-align: center;}
div > span { display: inline-block; }
Источник: http://jsfiddle.net/38efb/
Альтернативное решение, которое не требует посторонних наценки, но это, скорее всего, создает больше проблем, чем решает,-это использование свойства линии. Не делай этого. Но это включено здесь как академическая примечание: http://jsfiddle.net/gucww/
Вот пример плоских значков, которые хорошо играют с Zurb Foundation CSS Framework
Примечание. Возможно, вам придется отрегулировать высоту для разных шрифтов.
http://jsfiddle.net/jamesharrington/xqr5nx1o/
Волшебный соус!
.label {
background:#EA2626;
display:inline-block;
border-radius: 12px;
color: white;
font-weight: bold;
height: 17px;
padding: 2px 3px 2px 3px;
text-align: center;
min-width: 16px;
}