Como centralizar o texto verticalmente com um ícone grande de fonte impressionante?


231

Digamos que eu tenho um botão de inicialização com um ícone incrível de fonte e algum texto:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Como faço para que o texto apareça centralizado verticalmente? O texto está alinhado com a borda inferior do ícone agora: http://jsfiddle.net/V7DLm/1/

EDIT: Eu tenho uma solução possível : http://jsfiddle.net/CLdeG/1/, mas parece um pouco hacky - introduz tag p extra, usa pull-left e display: table. Talvez alguém possa sugerir uma maneira mais fácil.


2
Você é um deus. Sério, eu passei duas horas nisso hoje, sua solução foi DE longe a mais limpa. Não há necessidade de codificar nada.
Chuck

essa abordagem é a mais fácil
Raveen Beemsingh

Respostas:


304

Eu só tinha que fazer isso sozinho, você precisa fazer o contrário.

  • não brinque com o alinhamento vertical do seu texto
  • brinque com o alinhamento vertical do ícone incrível da fonte
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

É claro que você não pode usar estilos inline e direcioná-lo com sua própria classe css. Mas isso funciona de maneira copiar e colar.

Veja aqui: Alinhamento vertical de texto e ícone no botão

Se dependesse de mim, no entanto, eu não usaria o ícone-2x. E simplesmente especifique o tamanho da fonte, como a seguir

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

Para um exemplo de trabalho, consulte JsFiddle


1
sim, esta é uma solução melhor, obrigado. Ainda parece exigir a altura da linha, embora jsfiddle.net/paulftw/F3KyK/41
Paul

1
Atualizei o seu jsfiddle para saber como o faria. Eu usei o tamanho da fonte para o ícone em vez de usar o 2x. jsfiddle.net/3GMjp/1
andxyz

No seu primeiro trecho de código, a tag inicial <span> não corresponde à tag final </i>.
Jzacharuk 25/05

Não funciona com alguns dos ícones. exemplo fa-angle-left #
steakchaser

É importante perceber que a inclusão dos arquivos js impressionantes também pode modificar a aparência. Meu ícone foi longe demais ao topo, eu deletei a inclusão js para ver o que iria acontecer e agora é muito longe para o fundo -.-
lucidbrot

53

Eu uso ícones próximos ao texto em 99% das vezes, então fiz a alteração globalmente:

.fa-2x {
  vertical-align: middle;
}

Adicione 3x, 4x, etc. à mesma definição necessária.


7
Na minha opinião, essa deve ser a resposta aceita, pois é de longe a solução mais simples, a menos que esteja faltando alguma coisa na pergunta original. Obrigado @rushonerok! Não sei por que algumas pessoas dizem para não usar vertical-align: middle;- talvez esteja faltando alguma coisa aqui. Por favor, explique se sim.
Kendall #

1
@ Kendall Roth Acho que quando as pessoas dizem para não usar vertical-align: middle, elas significam se você está usando blockelementos . Se você estiver usando inline, inline-blockou table-cell, você deve ser bom. MDN:vertical-align
rinogo 30/10

Funciona como charme! Obrigado: D
Mohammed A. Fadil

37

Depois de considerar todas as opções sugeridas, a solução mais limpa parece definir a altura da linha e alinhar verticalmente tudo:

Veja a demonstração do Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

2
E se o seu contêiner for maior que 50px? Então não funcionará ... Tenho conteúdo que muda de tamanho e deveria ter um ícone centralizado ... alguma ideia sobre isso?
Slaven Tomac

24

se as coisas não estiverem alinhadas, uma simples line-height: inherit;CSS via elementos i.fa específicos que estão tendo problemas de alinhamento pode fazer o truque com bastante simplicidade.

Você também pode usar uma solução global viável, que devido a uma especificidade CSS um pouco mais alta, substituirá a regra .fa do FontAwesome que especifica line-height: 1sem exigir !importanta propriedade:

i.fa {
  line-height: inherit;
}

Apenas verifique se a solução global acima não causa outros problemas em locais onde você também pode usar os ícones FontAwesome.


16

uma opção flexbox - fonte impressionante 4.7 e abaixo

URL hospedado do FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

violino

http://jsfiddle.net/Hastig/V7DLm/180/


usando flex e fonte impressionante 5

URL hospedado do FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

violino

https://jsfiddle.net/3bpjvof2/


1
Isso pode centralizar um ícone verticalmente dentro de uma div, não apenas dentro de uma linha de texto. Funciona bem!
Sean the Bean

@ quem continuar tentando editar isso - esse geralmente é o meu estilo de layout para obter respostas. Acredito que o torna mais legível / compreensível e permite que as pessoas saibam melhor para onde estão indo antes de clicar no link. No caso da URL hospedada pela FA, algumas pessoas têm o hábito de destacar um link para copiá-lo, e é por isso que está escrito na íntegra. Os links do jsfiddle têm um cabeçalho para dividir melhor a página; caso contrário, é mais fácil perder e as respostas podem parecer confusas.
Hastig Zusammenstellen 12/03/19

11

A maneira mais simples é definir a propriedade css de alinhamento vertical como meio

i.fa {
    vertical-align: middle;
}

3
.svg-inline--fapara FontAwesome 5
darylknight

@darylknight, o que isso significa? Como eu ativaria / usaria isso? Adicionou algo depois do meu fa-clockna classe?
Prof. Falken

5

Isto funcionou bem para mim.

i.fa {
  line-height: 100%;
}

3

Tente definir seu ícone como height: 100%

Você não precisa fazer nada com o invólucro (por exemplo, seu botão).

Isso requer o Font Awesome 5. Não tenho certeza se funciona para versões FA anteriores.

.wrap svg {
    height: 100%;
}

Observe que o ícone é realmente um svggráfico.

Demo


2

Para quem usa o Bootstrap 4 é simples:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Isso não tem uso como alinhamento vertical: o meio que é aplicado por esta classe está direcionado apenas a tabelas.
Lucas Manzke 16/01

1

Outra opção para ajustar a altura da linha de um ícone é usar uma porcentagem da vertical-alignpropriedade. Geralmente, 0% é o fundo e 100% no topo, mas é possível usar valores negativos ou mais de cem para criar efeitos interessantes.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

1

Eu colocaria o texto em um formato para que você possa segmentá-lo separadamente. Agora, se você flutuar ambos e para a esquerda, poderá usar a altura da linha para controlar o espaçamento vertical do. A configuração para a mesma altura que (30px) o alinhará no meio. Veja aqui .

Nova marcação:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Novo CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

4
O alinhamento vertical não faz nada nos elementos do bloco, apenas funciona nos elementos embutidos ou nas células da tabela.
Cimmanon

Entendo, definir altura da linha = altura do contêiner e as coisas flutuantes restantes funciona e precisa de menos digitação. Aqui está um violino atualizado com ruído reduzido: jsfiddle.net/F3KyK/7
Paul

É melhor definir apenas vertical-align: middleo ícone e o texto. Dessa forma, você não está fazendo suposições sobre a altura do ícone e há menos CSS.
Maros

0

Ao usar uma caixa flexível, o alinhamento vertical dos ícones impressionantes da fonte ao lado do texto pode ser muito difícil. Tentei margens e preenchimento, mas isso moveu todos os itens. Tentei diferentes alinhamentos flexíveis, como centro, início, linha de base, etc., sem sucesso. A maneira mais fácil e limpa de ajustar apenas o ícone foi configurá-lo com div para position: relative; top: XX;Isso fez o trabalho perfeitamente.


0

Bem, essa pergunta foi feita anos atrás. Eu acho que a tecnologia mudou bastante e a compatibilidade do navegador é muito melhor. Você poderia usar o alinhamento vertical, mas eu consideraria que alguns são menos escaláveis ​​e menos reutilizáveis. Eu recomendaria uma abordagem flexbox .

Aqui está o mesmo exemplo que o pôster original usou, mas com o flexbox. Denomina um único elemento. Se o tamanho de um botão for alterado por qualquer motivo, ele continuará centralizado na vertical e na horizontal.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Exemplo: JsFiddle


0

Basta definir a vertical-alignpropriedade para o elemento icon:

div .icon {
   vertical-align: middle;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.