Float Center

Today, a bunch e-mails coming to my mail asking about the same question: How to make an image displayed on the center.

Capture

Basically people would use text-align:center to make the image displayed on the center. In some condition, such as a text, those trick would work.

But, if the object was an image, those trick won’t work. The trick to make your image displayed on the center is very simple, just make sure if the layer that covered the image is big enough (just make sure if the layer size that warped the image is bigger than the image). Then, you can put this code to make your image displayed on the center:

.layer-warp-layer img {
	display: block !important;
	margin-left: auto;
	margin-right: auto;
}

margin-left & right: auto means the image will be positioned on the center automatically depends on the width of the layer that warped the image.

And the most important thing is to make the display of the image become block !important. Without this code, your image will not be displayed on the center (even if you already declare the margin-left & right)

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s