how to use max-height and display table

Asked

Viewed 44 times

1

I have a div that her width and height is according to the content, and I need to leave her in the center of the page, I’m having trouble with the max-height, it just doesn’t work, the min-height works perfectly, when I take the display:table the max-height works, only I lose the centralization of the div, someone knows how to fix it ?

.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>

css
  • 1

    Put the code on the following platform and share the question so we can help: https://jsfiddle.net

  • here it is. if you take the display:table works perfectly https://jsfiddle.net/hdzns75u/

  • visually what is your goal?

  • my goal is, to leave the width of it according to the content but not passing of 500px, and the same height having at most 390px and it centralized, with position:absolute sure what I want, only that I lose other properties of my layout

  • Bruno here has no less than 20 responses of how to center elements on the page, you came to take a look? https://answall.com/questions/2817/qual-a-melhor-forma-de-centralizar-um-elemento-vertical-e-horizontalmente

  • @hugocsl my problem is the max-height that does not work with display:table, as my width is also according to the contents of the div, having at most 500px, I just need the div to be responsive as its content respects the max-width, max-height, if I take the display it works, then I center with position:aboslute, but mess up my layout all

  • Dude you don’t need to display:table, you can center in 20 different ways, with Flex, with Grid, With Transform:Translate, use display:table for this is a thing of the past. and use position:Bsolute tb is not necessary... I’ll make an example for you and you test in your project to see if you break the layout.

  • Dear I gave a quick read here on other questions in STOF in English, and it is not possible to put height on a table, unless this table is within a div that has set height and set overflow, but then you create a paradox, pq for height to work you need the display:block of div, but to align you need the display:table of table.... So somehow I think the Flex was the best option for you in this case...

Show 3 more comments

2 answers

3


As I told you, see that with display:flex you align the item easily, without needing position or display:table. It works from IE 10 to good forward. (IE9 is used by less than 0.05% of people in Brazil) 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>

2

The problem is not in the code but in the box-model concept by default elements such as the < div > are of the type block-level.

When you set a display value, some properties become to behave differently, after all to < div > is no longer block-level and yes table, as well as inline-level. Finally your code is ok, but what should be analyzed is the context of the element div - table, or better said your Rent (father).

Below is an example without excesses using CSS 2.1:

simple diplay Table

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.