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

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.

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

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.

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;
}

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.

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/

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

i.fa {
    vertical-align: middle;
}

Isto funcionou bem para mim.

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

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

Para quem usa o Bootstrap 4 é simples:

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

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
}

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;
}

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.

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

Basta definir a vertical-alignpropriedade para o elemento icon:

div .icon {
   vertical-align: middle;
}