Itens centrais verticais no Bootstrap 4

mleaf Publicado em Dev

mleaf

Como posso alinhar o texto ao meio em uma barra de navegação do menu suspenso?

Eu tenho isto:

Já tento seguir trechos, mas não tenho sucesso.

<ul class="navbar-nav ml-auto">
    <li ngbDropdown class="nav-item dropdown">
        <a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span>menu</span>
            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item">OPTION 1</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTON 2</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTION 3</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTION 4</a>
                <hr class="menu-item--division">
                <a class="dropdown-item">OPTON 5</a>
            </div>
    </li>
</ul>

Este é meu código real https://codeply.com/p/zNU5s3kyQl

Nisharg Shah

Use CSS abaixo em seu dropdown-itemou adicione d-flex justify-content-center align-items-centerclasses em cada um dropdown-item.

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

.dropdown-menu hr {
  margin-top: 0;
  margin-bottom: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-menu a {
  height: 53px;
}

.dropdown-item {
  text-align: center;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #16181b;
  text-decoration: none;
  background-color: #F3F3F3;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<ul class="navbar-nav ml-auto">
  <li ngbDropdown class="nav-item dropdown">
    <a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span>menu</span>

      <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 1</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 2</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 3</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 4</a>
        <hr class="menu-item--division">
        <a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 5</a>
      </div>
    </a>
  </li>
</ul>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Este artigo é coletado da Internet.

Se houver alguma infração, entre em [email protected] Delete.

editar em2021-08-7

deixe-me dizer algumas palavras

0comentários

loginDepois de participar da revisão

Postagem anterior:Azure AD B2C - personalizar a interface do usuário de um provedor de identidade personalizada do Azure AD

TOP lista

artigo

Itens centrais verticais no Bootstrap 4

Itens centrais verticais no Bootstrap 4

R Shiny: use HTML em funções (como textInput, checkboxGroupInput)

O Chromium e o Firefox exibem as cores de maneira diferente e não sei qual deles está fazendo certo

Como assinar digitalmente um documento PDF com assinatura e texto visíveis usando Java

R Folheto. Dados de pontos de grupo em células para resumir muitos pontos de dados

Gerenciar recurso shake de Windows Aero com barra de título personalizado

Como obter dados API adequados para o aplicativo angular?

UITextView não está exibindo texto longo

Por que meus intervalos de confiança de 95% da minha regressão multivariada estão sendo plotados como uma linha de loess?

Acessando relatório de campanhas na AdMob usando a API do Adsense

Usando o plug-in Platform.js do Google

Como posso modificar esse algoritmo de linha de visada para aceitar raios que passam pelos cantos?

Dependência circular de diálogo personalizado

Coloque uma caixa de texto HTML em uma imagem em uma posição fixa para site para desktop e celular

iOS: como adicionar sombra projetada e sombra de traço no UIView?

Como usar a caixa de diálogo de seleção de nomes com VBA para enviar e-mail para mais de um destinatário?

Tabela CSS: barra de rolagem para a primeira coluna e largura automática para a coluna restante

How to create dynamic navigation menu select from database using Codeigniter?

Converter valores de linha SQL em colunas

ChartJS, várias linhas no rótulo do gráfico de barras

用@StyleableRes注释的getStyledAttributes。禁止警告

não é possível adicionar dependência para com.google.android.gms.tasks.OnSuccessListener