Option Centered Image Css
As promised in my previous post, I wrote this article to guide you to center the image.
The horizontal centering is very easy, you just need to attribute “text-align: center” that can do that, but centered vertically and horizontally at the same time, how? I think not everyone knows this. There are many ways aligned so, this is one of the ways I have used.
1. Use the background property
Instead we use a tag “img” tag for “div” that a property background image, this time before I think of myself as a studio project.
This project, this page I hand code, then less experience should also somewhat short code, click on an album that any to see the slider running.
This is the example code
html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}
How to fit the components bring absolute attribute, which is very easy to use.
2. Use Table property
How to use these elements do not assume the absolute property only. If someone do not know what is absolute, see here
We apply the following css:
.hinh{
text-align:center;
width:300px;
height:300px;
line-height:300px;
text-align:center;
}
.hinh img{
vertical-align:middle;
}
Looking at the above code would not be too hard to understand right? let me explain a little bit for you.
Div tag bearing class is the width and height is 300px, it is important to declare the line of it is equal to the height of the div tag.
then we use the attribute “vertical-align: middle;” to center the image, photo center the height determined by the line-height, not “height”, you pay attention.
One more thing to note is, if the div tag with the attribute “padding” it will not be a head start, his mind is so long too do not use certain attributes “margin” there is no more activity.
this is often used for product presentation or website the slider as vertical or horizoncal (running horizontal and vertical run)
3. Aligning the Absolute
This way a lot of users, I do not always above html snippet to do for example, we use the following css:
.hinh{
width:300px;
height:300px;
position:relative;
}
.hinh img{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
}
Others in this way is photographs bring the absolute property, first for above and to the left corner of the image coincides with the center of the “div”
then the image is 200 x 200 and it runs counter to the “top” and “left” a period equal to half the height and half the width of the image.
You imagine how the picture yet?
Here are three ways centered that I often use, according to the case in which we use it, is not the case always used.
I write in improvisational should order the article a bit confusing, hope your understanding.
Click like at the top of the spirit can post your support