How to Make Image Post on Center of Position (Buat Gambar di Tengah-Center)

The simplest way to make center position of the image

Use the following HTML code on the page post and widgets:

<img style="display: block; margin: 0 auto; text-align: center; width: 200px; height: 300px;" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />

Adjust the position and size of the image with CSS:

The second way will make the code more compact html. We can add some CSS code to make the image look more beautiful. CSS code that can be added such as border, border-radius, padding, drop-shadow (shadow box), background, hover and some CSS3 code to give the animation. CSS3 code that can be exploited mainly in the form of CSS3 transition-transformation.

Example-1 : img class="centerimg-1"
margin: 0 auto;

<style type="text/css">.centerimg-1 {
 display: block;
 margin: 0 auto;
 text-align: center;
}
</style>
<img class="centerimg-1" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-2 : img class="centerimg-2"
margin: 10px auto;

<style type="text/css">.centerimg-2 {
 display: block;
 margin: 10px auto;
 text-align: center;
}
</style>
<img class="centerimg-2" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-3 : img class="centerimg-3"
margin: 60px auto;

<style type="text/css">.centerimg-3 {
 display: block;
 margin: 60px auto;
 text-align: center;
}
</style>
<img class="centerimg-3" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-4 : img class="centerimg-4"
margin: 1.5em auto;

<style type="text/css">.centerimg-4 {
 display: block;
 margin: 1.5em auto;
 text-align: center;
}
</style>
<img class="centerimg-4" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-5 : img class="centerimg-5"
margin: 2em auto;

<style type="text/css">.centerimg-5 {
 display: block;
 margin: 2em auto;
 text-align: center;
 padding: 2px;
 border: 5px solid #bbb;
}
</style>
<img class="centerimg-5" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-6 : img class="centerimg-6"
margin: 15px auto;

<style type="text/css">.centerimg-6 {
 display: block;
 margin: 15px auto;
 text-align: center;
 padding: 4px;
 background: #990000;
 border: 4px solid #9999CC;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
</style>
<img class="centerimg-6" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-7 : img class="centerimg-7"
margin: 20px auto;

<style type="text/css">.centerimg-7 {
 display: block;
 margin: 20px auto;
 text-align: center;
 padding: 4px;
 border: 4px solid  #003399;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
 -moz-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
 -webkit-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300; 
}
</style>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-8 : img class="centerimg-8"
margin: 25px auto;

<style type="text/css">.centerimg-8 {
 display: block;
 margin: 25px auto;
 text-align: center;
 padding: 4px;
 background: #990000; 
 border: 2px solid;
 border-color: #0099FF #CCCC33 #CCCC33 #0099ff; 
 border-radius: 12px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
}
</style>
<img class="centerimg-8" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-9 : img class="centerimg-9"
margin: 30px auto;

<style type="text/css">.centerimg-9 {
 display: block;
 margin: 30px auto;
 text-align: center;
 width: 300px;
 height: 300px;
}
</style>
<img class="centerimg-9" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

N o t e :

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

Example

<div style="float: left; font-size: 14px; color: green; border: 2px solid red; padding: 10px; margin: 0 10px 10px 0;">
When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

<img src="http://img.theomegaproject.org/thumbs/2010/07/329.jpg" width="400" height="300" />

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.
</div>

<div style="clear:both;"></div>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

This box using "float-left"

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

Click the link below to open the tutorial!

Tutorial Image on Center of Position

Original tutorial by gubhug reyot

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.

1. gubhug reyot
2. Tanty Template Modification
3. bloggerstuars

Thank you for your visit!

Greeting