1

No exemplo abaixo usa-se, transform: translate(-50%,-50%); para manter um texto no meio do elemento. Mas não é uma solução que funciona em todos os navegadores. Gostaria de fazer mesmo, mas com css simples ou até mesmo com jquery.

.artigo-content {
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
    padding: 0 30px;
    height: 100%;
    text-align: center;
    position: relative;
    height:300px;
}

.artigo-inner {
    width: 90%;
    margin: auto;
    position: absolute;
    top: 50%; left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
<div class="artigo-main">
  <div class="artigo-content">
    <div class="artigo-inner">
      <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
      <p>Abril 26, 2018</p>
    </div>
  </div>
</div>

5
  • 1
    O mais simples é mesmo display:flex
    – Isac
    22/03/2018 às 19:46
  • 1
    @Isac realmente a forma mais simples é com Flex indiscutível. Mas o suporte dos browsers ao Flex é ainda pior que ao Transform caniuse.com
    – hugocsl
    22/03/2018 às 20:01
  • 1
    @hugocsl Embora o suporte ainda não seja a 100%. Todos eles suportam a partir de determinadas versões. O único patinho feio é o mesmo do costume, o IE, mas ai já seria de esperar. Com vendor prefixes ainda vai mais atrás nas versões.
    – Isac
    22/03/2018 às 20:04
  • 1
    @Isac Pois é o maldito IE sempre ele, mas muitas empresas só homologam para ele, pois isso pensando no que o autor da pergunta falou fiz o comentário.
    – hugocsl
    22/03/2018 às 20:13
  • Se está a utilizar o Bootstrap 4, então você já está dando suporte apenas ao IE 10, e o IE desde a versão 9 dá suporte a transformações 2d 23/03/2018 às 14:37

1 Resposta 1

1

A versão para esse tipo de alinhamento mais antiga que conheço seria com display:table, com isso vc não precisa usar tamanhos fixos. (usando valores fixos também da para alinhar no centro)

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
}
.artigo-inner {
    margin: auto;
    width: 90%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

8
  • Solução perfeita. 22/03/2018 às 20:16
  • É possivel usar isso dentro de uma grid do bootstrap? Estou tentando aqui, mas não funciona. 22/03/2018 às 20:51
  • John tente colocar !important em todos os estilos que vc usar para fazer esse customização principalmente no que for display, vc vai ter que substituir as classes default do bootstrap por isso precisa do !important.
    – hugocsl
    22/03/2018 às 21:10
  • funciona bem sem precisar fazer nada, eu reproduzir o demo no codepen: codepen.io/johnquimera/full/PRjpOY 22/03/2018 às 22:08
  • 1
    @JohnQuimera ótimo, quanto menos interferir nos estilos nativos do Bootstrap melhor! Boa sorte com o projeto []'s Vi que vc está usando o Bootstrap 4 né, depois pesquise sobre a classe "d-flex" pode te ajudar com esses alinhamentos, é com flex, mas é nativo do BS4
    – hugocsl
    22/03/2018 às 23:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .