Выравнивание текста по центру внутри абсолютно спозиционированной кнопки при респонсив дизайне

@Hadoukenlol · Регистрация: 03.07.2014

Студворк — интернет-сервис помощи студентам

Всем привет, нужна помощь в выравнивании текста внтури кнопки с позицией absolute. Подскажите как мне выровнить текст по центру.
вот код:
http://jsfiddle.net/4pm7ddjf/6/

HTML5
1
2
    <form class="form-horizontal" role="form"><input type="text" class="form-control" placeholder="Введите номер телефона" style="float: left; height: 34px; width: 70%; margin-right: 20px;" /><button type="submit" class="buttonanim" style="padding: 0px; height: 34px; font-weight: bold; width: 25%; position: absolute; display: inline-block;"><span style="padding: 0px 5px 0px 5px; font-family: corkiregular; top: 0; left: 0; line-height: 34px; position: absolute;">Заказать</span> </button>
    </form>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.buttonanim {
  border: 1px solid black;
    background: black;
border: 2px solid #fff;
-moz-border-radius: 2px;
border-radius: 2px;
color: red;
cursor: pointer;
display: inline-block;
font-size: 12px;
height: 34px;
letter-spacing: 2px;
line-height: 34px;
/*width:0px;*/
outline: none;
padding: 0 15px 0 25px;
position: relative;
    width:250px;
text-transform: uppercase;
    z-index:1;
   }
 
   .buttonanim:hover::before{
    width: 100%;
   }
   .buttonanim::before{
    transition-timing-function: linear;
    transition-duration: 250ms;
    content: '';
    z-index:0;
    top:0;
    left:0;
    position: absolute; /* Абсолютное позиционирование */
    height: 100%; width: 0;
    background: #fff; /* Фон */
   }

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@maximus2011 · 27.08.2014, 16:49

а зачем у вас там столько стилей прописано? ив хтмл и в css, причем стили такие, что они попросту не совместимы. Там надо повырезать половину. Ну или как вариант у span сделать на глаз позицию left, чтобы по середине встал

@N3stY · 30.08.2014, 08:53

Hadoukenlol,

HTML5
1
2
3
4
5
6
<form class="form-horizontal" role="form">
<input type="text" class="form-control" placeholder="Введите номер телефона" style="float: left; height: 34px; width: 70%; margin-right: 20px;" />
<button type="submit" class="buttonanim" style="padding: 0px; height: 34px; font-weight: bold; width: 25%; position: absolute; display: inline-block;text-align: center;">
<span style="padding: 0px 5px 0px 5px; font-family: corkiregular; top: 0; line-height: 34px; text-align:center;width: 100%;position: relative;">Заказать</span> 
</button>
    </form>

CSS как и был.

Позиция absolute для span внутри кнопки, имхо лучше relative. Для центрирования текста span должен иметь ширину 100% от кнопки и text-align: center;. И будет стоять он по центру.
Код на JSFiddle подправил вам)

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@maximus2011 269 / 261 / 35 Регистрация: 21.02.2012 Сообщений: 1,078
	27.08.2014, 16:49
	а зачем у вас там столько стилей прописано? ив хтмл и в css, причем стили такие, что они попросту не совместимы. Там надо повырезать половину. Ну или как вариант у span сделать на глаз позицию left, чтобы по середине встал 0