All geek questions in one place

Vertical alignment of text inside an inline div block

I create a website with a flat design. I have a headline and below it are two different colored blocks next to each other. I tried float left and right, but I was recommended to use display: inline-block instead.

I ran into a problem. I want to place the text right in the middle of both the left and right blocks and tried to use alignment elements: center, but realized that it only works if the div is set to flex.

So my question is: can I somehow save my built-in block and get the text in the center of my blocks (both horizontally and vertically)?

body { margin: 80px 0 0; } #pagewrapper { width: 100%; } #header { width: 100%; height: 80px; background-color: #008B8B; position: fixed; top: 0; } .content-left, .content-right { width: 50%; height: 500px; color: #FFFFFF; display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; } .content-left { background-color: #66CC99; } .content-right { background-color: #20B2AA; } #header-bot { height: 800px; background-color: #F8F8FF; } #footer { height: 50px; background-color: #AFEEEE; } .title { font-size: 18px; } 
 <body> <div id="pagewrapper"> <div id="header"> </div> <!-- End of Header --> <div class="content-left"> <span class="title">This is left Content</span> </div> <!-- End of Content Left --> <div class="content-right"> <span class="title">This is Right Content</span> </div> <!-- End of Content Right --> <div id="header-bot"> </div> <!-- End of Header-Bot --> <div id="footer"> </div> <!-- End of Footer --> </div> <!-- End of PageWrapper --> </body>
+5
source share
2 answers

When changing the display type of columns on a table-cell , a problem may arise (for example, the positioning effect is relative undefined for table elements). Another option is to add a full height element (pseudo) to the columns and align this and the <span> element vertically with the declaration vertical-align: middle; :

EXAMPLE HERE

 .content-left, .content-right { text-align: center; } /* Align inline children horizontally */ .content-left:after, .content-right:after { content: ""; display: inline-block; vertical-align: middle; /* Align inline level elements vertically */ height: 100%; } .title { vertical-align: middle; /* Align inline level elements vertically */ }

You can find more detailed information here my answer .

+12
source

On your .content-left and .content-right divs, change the display to a table and add center alignment. To scroll .title, change the display to a table cell and add vertical alignment in the middle;

 .content-left, .content-right { display: table; text-align: center; } .title { display: table-cell; vertical-align: middle; }

Here's the jsfiddle to demonstrate (I changed the divs to a height of 200 pixels to make it easier to see the centering effect in a small jsfiddle window)

+1
source

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

More articles:


All Articles