текст не центрирован с цветом фона - PullRequest
Новая
       5

текст не центрирован с цветом фона

0 голосов
/ 29 мая 2020

поэтому я создал этот контейнер flexbox с некоторыми элементами flex:

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

проблема в том, что когда я нажимаю на один из них, белая рамка не спамит по всей ширине (от начала до конца), также текст внутри фона не центрируется по центру, когда я нажимаю на него, а я не Не знаю почему

код: 

<div className="container">
            <div className="flex-item item-1 item">John Smith</div>
            <div className="flex-item item-2 item">Male, 26 years old</div>
            <div className='flex-item item-3 item'onClick={setSelectedItem} style={style} > Overview</div>
            <div className='flex-item item-4 item'onClick={setSelectedItem} style={style}>Alerts</div>
            </div>
        </div>

css код: 

.container {
    border: 2px solid #57c0e8;
    background-color: #57c0e8;
    margin-top: 5%;
    float: left;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    color:white;
    display: flex;
    flex-direction: column;
    height:40rem;
    width:15rem;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size:0.9rem;
}

.flex-item{
    margin-top: 2rem;
}

.selected{
    background-color: white;
    color: #57c0e8;
    border-radius: 50px 0 0 50px;
    box-shadow: 2px 2px 5px lightgray;
    width: 14rem;
    height: 5%;
    text-align: left;
}

Ответы [ 3 ]

0 голосов
/ 29 мая 2020

Чтобы центрировать (по вертикали) текст внутри, просто добавьте align-items: center к .flex-item: 

.flex-item {
    display: flex;
    align-items: center;
}

А чтобы получить полную ширину, измените на width: 100% на .selected

0 голосов
/ 29 мая 2020

для .selected, удалите border-radius и сделайте width:100%

0 голосов
/ 29 мая 2020

Если я правильно понял, вы хотите, чтобы белая часть, где написано «Обзор», располагала текст по центру по вертикали. Если это так, я бы дал ваш .selected элемент display:flex; align-items:center;. Что касается части с шириной, похоже, у вас есть монетник с фиксированной шириной. Поскольку у нас нет кода, я не могу сказать наверняка, но думаю, что проблема в ширине. Попробуйте удалить его и оставьте отступы для всех элементов, кроме этого «Обзор». Скажите, что произойдет после того, как вы это сделаете.

Мне нужен код.

...