Skip to Main Content

What is a DIV? 

"HTML Content Division element" ( ) is a building block website sides. In our text, learn four ways to position a giant element on a page website site. 

Just as a brick is a building block of a wall, so is it div represents "brick ”under construction website page.

Div is a container for all elements. More is being inserted into it div elements and all other elements they can go into it. 

 

How to position DIV on the site page?

We will introduce you to four different methods by which you can position yourself div element of site stations.

 

Method 1 - Use "flex layout"

Flex layout is the fastest way to put multiple elements into one div

 

.child-div {

display: flex;

justify-content: center;

  align-items: center;

}

Method 2 -  margin car 

A quick and easy solution, but it has its limitations. Only for elements that have a defined width. Parent div must contain text-align: center;. We must not have position fixed or absolutely.

You can read more about positioning elements in CSS here.

We cannot use it for vertical alignment.

 

.child-div {

background: url (“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%

margin: 0 car; 

}

Method 3 - combination text-align i inline-block

The difference between the 2nd and 3rd methods is that width it does not need to be defined. Also, we can't use vertical alignment here either.

 

.child-div {

background: url (“logo.png”) no-repeat; 

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%

Display: inline-block;

}

Method 4 - 2D Transform

Position, top and left and transform div will always be in the middle of the screen (horizontally and vertically).

Div will be over all other elements (due to absolute position). Width and height must also be defined.

 

.child-div {

bacground: url (“logo.png”) no-repeat;

background-size: 100%;

width: 200px;

height: 200px;

border-radius: 50%

position: absolute;

top: 50%;

left: 50%

transform: translate (-50%, -50%); 

}

For more news and interesting stories from digital marketing visit our blog page or follow our Instagram profile.

Made by Aleksandar Đurđević - Senior Web Developer @Digitizer