1

tenho uma div que a largura e altura dela é de acordo com o conteúdo, e preciso deixar ela no centro da página, estou com problema com o max-height, ele simplesmente não funciona, o min-height funciona perfeitamente, quando eu tiro o display:table o max-height funciona, só que eu perco a centralização da div, alguém sabe como arrumar isso ?

.miniatura
{
	display:table;
	margin:2% auto 0 auto;
	padding:2% 2%;
        max-width:500px;
        max-height:390px;
	width:auto;
        height:auto;
        background:green
}
<div class="miniatura">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

8
  • 1
    Coloca o código na seguinte plataforma e partilha na pergunta para que possamos ajudar: jsfiddle.net 21/06/2018 às 8:49
  • aqui está. se tirar o display:table funciona perfeitamente jsfiddle.net/hdzns75u
    – goio
    21/06/2018 às 8:58
  • visualmente qual é o teu objetivo? 21/06/2018 às 9:19
  • meu objetivo é, deixar a largura dela de acordo com o conteúdo porém não passando de 500px, e a altura mesma coisa tendo no maximo 390px e ela centralizada, com position:absolute da certo oque eu quero, só que eu perco outras propriedades do meu layout
    – goio
    21/06/2018 às 9:31
  • Bruno aqui tem nada menos que 20 respostas de como centralizar elementos na página, vc chegou a dar uma olhada? pt.stackoverflow.com/questions/2817/…
    – hugocsl
    21/06/2018 às 10:10

2 Respostas 2

2

Como te falei, veja que com display:flex vc alinha o item facilmente, sem precisar de position ou display:table. Funciona do IE 10 para frente de boa. (IE9 é usado por menos de 0,05% das pessoas no Brasil) https://caniuse.com/#search=flex

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100%;
  display: flex;
}
.miniatura
{
  margin: auto;
  padding:2%;
  max-width:500px;
  max-height:390px;
  overflow-y: auto;
  background:green
}
  <section>
    <div class="miniatura">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum maiores numquam provident, soluta, debitis eveniet tempore placeat deserunt perspiciatis ex exercitationem voluptatem neque esse corrupti doloremque qui laudantium. Praesentium enim ipsam necessitatibus dolor veniam fugiat dicta harum. Minima eveniet totam aspernatur facilis numquam corrupti deserunt. Minus, quisquam ex! Incidunt est deserunt dolore unde dolorem error vitae, nobis cum tempore reprehenderit modi quo eum neque quos, cupiditate esse quaerat commodi earum a sit iusto animi. Exercitationem, neque! Dolorum culpa cumque alias excepturi dolores maxime cupiditate assumenda voluptas harum architecto. Fuga enim quae quis corporis! Ipsum eveniet, fuga voluptate cum corporis iusto nisi aut ipsam mollitia sed unde vitae, quas suscipit sint saepe sapiente ab omnis at exercitationem. Nihil soluta ratione rerum amet ad vel laborum eum unde similique alias accusamus consequuntur sequi est reiciendis, doloribus, perspiciatis voluptas repudiandae vitae debitis dolorem at in quo voluptatibus dolores. Nulla odit natus quas aperiam voluptatem, consequatur, nihil incidunt ipsum ex quo alias ab ipsam provident distinctio sint sunt cum obcaecati voluptatibus enim, aut porro. Beatae eveniet voluptatum iusto consequuntur magnam doloremque accusantium maiores dolore necessitatibus corporis saepe, earum nulla amet? Laudantium labore beatae expedita. Perspiciatis placeat quos expedita dignissimos! Deleniti sed voluptatum dolor obcaecati, iste reiciendis repellat exercitationem dolorem necessitatibus? Amet quaerat nemo veritatis quis maxime quae doloribus nostrum, ea minus fuga ad nesciunt alias aspernatur illo ipsam voluptates delectus voluptas aperiam iusto libero. Facilis provident eveniet nemo consequatur voluptatibus aliquid, at libero ipsa exercitationem qui officia atque dolore adipisci odio perspiciatis ex voluptate deleniti nam tenetur soluta ipsum quod quas voluptatem odit? Beatae atque, cumque neque itaque dolor earum quam sit eum corporis facilis dolores quos harum adipisci fugit recusandae esse dicta soluta praesentium eos, sint quis ullam consequatur accusantium. Deleniti iure neque iusto illo esse rem rerum asperiores veniam soluta non? Expedita!
    </div>
  </section>

1

O problema não está no código e sim no conceito de box-model do CSS, pois por default elementos como a < div > são do tipo block-level.

Quando você defini um valor de display, algumas propriedades passam a ser comportar de forma diferente, afinal a < div > não é mais block-level e sim table, assim como inline-level. Por fim seu código está ok, porém o que deve ser analisado é o contexto do elemento div - table, ou melhor dizendo seu parent (pai).

Abaixo um exemplo sem excessos usando CSS 2.1:

simples diplay Table

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 .