Search the Community
Showing results for tags 'in-line block'.
Found 1 result
-
Hi All, I'm trying to relearn everything I knew about HTML again and I'm picking it up but slowly. I have created a table and all is fine with that. Placed on top of this table, I wanted to have several blocks of different sizes. They weren't meant to line up with the table as they illustrate different steps of a process as you go along the table from left to right. (One block could cover a column and then part of another one). As a result, I thought a block container with several in-line blocks internally would be appropriate to use. Most of my issues are around my efforts to center the text in the middle of the inline block - you'll notice that where text breaks to a second line there's this weird behaviour as well. I can't use padding to center the cell (I believe) as it increases the size beyond what I want. Below is an example of the code being used. Can someone advise me of the best method to center the text in the inline blocks and resolve the blocks moving out of position as a result? <!DOCTYPE html> <html> <head> <style> div.container { align: center; width: 500px; margin: 0 auto; position: relative; border: 1px solid black; Display: block; } div.itilblock { background-color: rgb(3,173,181); border-style: outset; text-align: center; color: white; height: 75px; padding: 3px; position: relative; display: inline-block; } </style> </head> <body> <div class ="container"> <div class ="itilblock" style= "width: 150px; align-items: center; line-height: 50px;">something and something else</div> <div class ="itilblock" style= "width: 200px; align-items: center; line-height: 30px; left: 20px;">something and something else</div> </div> </body> </html>
