Jump to content

Blocks and in-line blocks


Honest989
 Share

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...