Como centralizar horizontalmente um elemento de amplitude dentro de uma div

122

Estou tentando centralizar os dois links 'view website' e 'view project' dentro da div circundante. Alguém pode apontar o que preciso fazer para que isso funcione?

JS Fiddle: http://jsfiddle.net/F6R9C/

HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

css

— J82
fonte

Relacionado: stackoverflow.com/questions/7886460/…

— Ciro Santilli escreveu:

Aqui estão dois métodos simples para elementos de centro dentro de uma div, na vertical, horizontal ou ambos (puro CSS): stackoverflow.com/a/31977476/3597276

— Michael Benjamin

134

Uma opção é <a>exibir inline-blocke aplicar text-align: center;no bloco que contém (remova o flutuador também):

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

— à deriva
fonte

1

Isso fez o truque para mim em um tema moderadamente complexo que eu precisava invadir um pouco. O link para o JSFiddle mais adiante foi incrível para me permitir testar. Editei esta entrada para incluir a alteração "overflow: hidden" para "overflow: hidden;"

— chamou ..

1

Parece uma solução muito limpa.

— Jim Aho

Veja a resposta de Ahmed Bahtity abaixo, style = "text-align: center", é muito mais conciso.

— Wallace Howery

141

Outra opção seria dar a amplitude display:table;e centralizá-la viamargin:0 auto;

span {
display:table;
margin:0 auto;
}

— user1721135
fonte

4

Sempre interessante ver soluções diferentes para o mesmo problema.

— Jim Aho 23/09

Suportado apenas em navegadores atualizados nos últimos dois anos. caniuse.com/#feat=css-table

— CamHart 4/17

1

melhor solução IMO

— Martijn Scheffer

10

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

— Ahmed Bahtity
fonte

8

Aplicar inline-blockao elemento que deve ser centralizado e aplicar text-align:centerao bloco pai fez o truque para mim.

Funciona mesmo em <span>tags.

— Talha Imam
fonte

1

Os spans podem ficar um pouco difíceis de lidar. se você definir a largura do intervalo de ensino, poderá usar

margin: 0 auto;

para centralizá-los, mas eles acabam em linhas diferentes. Eu sugeriria tentar uma abordagem diferente para sua estrutura.

Aqui está o jsfiddle com o qual descubro a cabeça: jsFiddle

EDITAR:

A resposta do Adrift é a solução mais fácil :)

— David Ziemann
fonte

0

Suponho que você queira centralizá-los em uma linha e não em duas linhas separadas, com base no seu violino. Se for esse o caso, tente o seguinte css:

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

Removai o flutuador desde que você deseja centralizá-lo e, em seguida, ampliei a extensão em torno dos links adicionando margem: 0 automático a eles. Por fim, adicionei uma largura estática ao intervalo. Isso centraliza os links em uma linha dentro da div vermelha.

— Duffmaster33
fonte

0

somente css div, você pode centralizar o conteúdo

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/

— MrBii
fonte