Как центрировать элемент input на странице?

Question

Любим

верстка

Как центрировать элемент input на странице?

Здравствуйте! У меня есть админка с подписками, и для каждой подписки необходимо расположить цену с указанием валюты по центру. При этом инпут должен оставаться в центре, даже во время ввода цены. Как это можно реализовать?

4 сентября 2024 г. 15:12

Ответы на вопрос 2

Похожие вопросы

Answer 1

Здравствуйте! Для центрирования элемента `<input>` на странице, а также для того, чтобы он оставался в центре при вводе цены, вы можете использовать CSS. Вот пример, как это можно сделать:

### HTML

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Центрирование инпута</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <input type="text" class="price-input" placeholder="Введите цену" />
        <span class="currency">₽</span>
    </div>
</body>
</html>
```

### CSS (styles.css)

```css
body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    display: flex;
    align-items: center; /* Центрирует инпут и валюта по вертикали */
}

.price-input {
    text-align: center; /* Центрирует текст внутри инпута */
    width: 100px; /* Ширина инпута */
    padding: 5px;
    font-size: 16px;
}

.currency {
    margin-left: 10px; /* Отступ между инпутом и валютой */
    font-size: 16px;
}
```

### Объяснение:

1. **Flexbox**: Используем flexbox для центрирования элемента на странице. Устанавливаем `display: flex;` на `body` для центрирования по горизонтали и вертикали.

2. **Контейнер**: Создаем контейнер (div с классом `container`), который содержит поле ввода (`input`) и текст валюты (`span`). Используем `align-items: center;` для вертикального выравнивания.

3. **Центрирование текста в инпуте**: Устанавливаем `text-align: center;` для инпута, чтобы текст также центрировался внутри него.

4. **Ширина инпута**: Устанавливаем фиксированную ширину для инпута, чтобы он сохранял свою форму, когда пользователь вводит текст.

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

Answer 2

Еслиб буковка была не цветной - можно было бы какой-нить inputmask посоветовать. Оно бы из коробки всё работало. 
 Подозреваю, что где-то на просторах есть библиотека и для цветной буковки, но в целом алгоритм такой: 
 Делаешь input с text-align: center и text-indent: -<размер буковки/2> . 
 Скриптом к нему абсолютно цепляешь div с pointer-events:none и копией стилей input ,  в котором прозрачный span с дублируемым введённым текстом( input.oninput ) + span с раскрашенной буковкой. 
 Также следишь, чтоб input всегда был шире текста.