All geek questions in one place

Vertical alignment of line elements with different heights

I have an HTML page containing an inline div block with a variable height (labeled .banner ):

 <html> <head> <body> <div id="container"> <div id="header" style="margin: 0; width: 100%"> <div> <div class='banner'> ... </div> <div class='banner'> ... </div> <div class='banner'> ... </div> </div> .banner { display: inline-block; }

They have different widths and are added at runtime. The layout of the site looks ugly, and the banners are not aligned vertically.

For unknown reasons, a div does not start not from the upper left corner, but there is empty space at the top. How do you align it and the next banner vertically (for example, align their bottom lines)?

I am using jQuery, jQueryUI and ASP.NET MVC2.

+6
source share
1 answer
 .banner { display: inline-block; vertical-align:middle; }
+10
source

Source: https://habr.com/ru/post/943775/

More articles:


All Articles