Honest989 Posted March 23, 2017 Share Posted March 23, 2017 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> Link to comment Share on other sites More sharing options...
Ingolme Posted March 23, 2017 Share Posted March 23, 2017 Setting a relative position is going to mess up your layout, as well as using align-items. Use text-align to center the text. <div class ="container"> <div class ="itilblock" style= "width: 150px; line-height: 50px;">something and something else</div> <div class ="itilblock" style= "width: 200px; line-height: 30px;">something and something else</div> </div> div.itilblock { background-color: rgb(3,173,181); border-style: outset; text-align: center; color: white; height: 75px; padding: 3px; display: inline-block; } Remember that inline blocks have a small space between them unless the tags in the source code are on the same line with no space in between them. Link to comment Share on other sites More sharing options...
Honest989 Posted March 24, 2017 Author Share Posted March 24, 2017 Thank you for the help. It's cleared up a few things but I'm left with the problem of the text. I can center it as described but using line height has this weird effect on wrapped text. That what should look like Text, text & text (which would be on two lines) Becomes Text, text &Text. It also disturbs the flow of the boxes and pushes them down in line with the lowest part of the text. What's happening here? Is my CSS and margins doing something odd? Link to comment Share on other sites More sharing options...
Ingolme Posted March 24, 2017 Share Posted March 24, 2017 The line-height property determines the space between lines of text. You can remove the line-height declarations. If the text is wrapping it's because the boxes aren't wide enough to fit it. You should increase the width of the box if you don't want the text to wrap. Link to comment Share on other sites More sharing options...
Honest989 Posted March 24, 2017 Author Share Posted March 24, 2017 The text wrapping is fine - I I just want this text to be centered in the block (i.e in the middle) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now