Vertical Centering With CSS nguồn http://www.vertical-align.com/
There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center:
If you know the height of your containing div, and the height of your inner centered div, or, if you the height of your inner div does not matter, then vertical aligning is simple. However, if you are vertically centering anything that is variable, such as text, vertical centering is more complex and require hacks.
The HTML used in our examples:
<div id="containingBlock">
<div>
<p>This sentence will change in each example</p> </div>
</div>
Note: I will post an entry on vertical centering of text soon
Mathematical Method for known heights:
When you know the height of the containing element, and the height of the element being vertically centered, simply use math to figure out the height of the margins on the inner element.
#containingBlock {display: block; height: 200px;}
#containingBlock div {height:50px; margin: 75px 0;}
The green outlined div is vertically centered in all browsers.
As is evident in the above example, this method really only works for images or other media when you know the exact height of your content. This method should not be used for containing text as a developer really never knows how much text will be contained in the box in the end, and the font size: users should be allowed to increase font size. In our example, the text does not take up the height alloted to the paragraph, so it is not vertically centered, but the containing div (i made the background grey) is centered..
Block level vertical centering via the table display method:
Vertically centering block level elements should be simple simply by using
display: table; and vertical-align: middle. Unfortunately, IE6 and IE7 do not understand the value of table and table-cell as values of the display property.
The CSS for CSS compliant browsers:
#containingBlock {display: table; height: 200px; position: relative; overflow: hidden;}
#containingBlock div {display: table-cell; vertical-align: middle;}
Rendering of the above code: (borders have been added so you can see the effect, and div id is actually unique) has the anticipated look in Firefox, Safari and other CSS compliant browsers, but not in IE, including IE7.:
The CSS for IE6 and IE7:
#containingBlock {height: 200px; position: relative; overflow: hidden;}
#containingBlock div { position: absolute; top: 50%;}
#containingBlock div p {position: relative; top: -50%;}
Rendering of the above code: (borders have been added so you can see the effect):
The concept is that the outer content which is relatively positioned and has a defined height contains an absolutely positioned div that starts 50% from the top of the container div. The absolutely positioned div, in turn, contains a relatively positioned element that has as it’s middle the top of the absolutely positioned div. Look at the colors in IE, and if the above sentence didn’t make sense, it will.
Vertical Alignment Table Display Hack
#containingBlock {display:table; height: 200px; position: relative; overflow: hidden; }
#containingBlock div {*position: absolute; top: 50%; display: table-cell; vertical-align: middle;}
#containingBlock p {*position: relative; top: -50%;}
Vertically Centering Fluid elements within a page (useless, except for useless splash pages):
html, body, #containingBlock {height: 100%; position:relative; }
#containingBlock div {height: 50%; position: absolute; top: 25%; }Horizontal & Vertical Alignment For Div Tag Using CSS
Posted 3 years, 6 months ago at 8:15 pm. 9 comments
In most of the cases when you are working with HTML div elements you may required to align the div on the desired location of the web page using CSS Horizontal and Vertical alignment. The HTML div tag is nothing more than a container for other tags. Much like the body tag, Div elements are blocking elements and work in the following scenes grouping other tags together. The attributes id, width, height, title and style used with div element, anything else should be engaged for CSS. The below example will guide you to understand how to align the div tag elements Horizontal and Vertical
#mydiv {
position:absolute;
top: 50%;
left: 50%;
width:350px;
height:300px;
margin-top: -150px; /*set to a negative number 1/2 of your height*/
margin-left: -175px; /*set to a negative number 1/2 of your width*/
border: 2px solid #2956C6;
background-color: #FFB;
text-align: center;
}How to use vertical-align in CSS
Posted 3 years, 6 months ago at 3:05 am. 0 comments
Poor vertical align still gets a bad rap. While it probably wouldn’t top the list of least used CSS properties (clip may have earned that title), it certainly should get an honorable mention as one of the most avoided and least understood.
I think this is because most coders would expect vertical-align to align an element vertically in its container. Instead it vertically aligns an element in relation to the line-height. For example,
#div {vertical-align: middle; } would give us:
While
#div {vertical-align: middle; line-height: 2em; } gives us:
To make matters worse, there are other scenarios that may not work as expected. For example:
CSS
#exampleContainer {
vertical-align: middle;
line-height: 2em;
width: 200px;
height: 2em;
border: 1px solid red;
}
HTML
<div id="exampleContainer">text<img src="http://vertical-align.com/image.jpg" width="2" height="25" /></div>
This gives us text that is vertically aligned in the middle in the first box, but it isn’t where we wanted it in the second.
If we add a vertical-align declaration specifically for the image then we get the intended result with the text.
#exampleContainer img {
vertical-align: middle;
}
Vertical-align Definition & Usage
Posted 3 years, 6 months ago at 3:01 am. 2 comments
The vertical-align property is supported in all major browsers.
Note: The value “inherit” is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports “inherit”.
Property Values
| Value | Description |
|---|---|
| length | Raises or lower an element by the specified length.
Negative values are allowed
|
| % | Raises or lower an element in a percent of the “line-height”
property. Negative values are allowed
|
| baseline | Align the baseline of the element with the baseline of the parent element.
This is default
|
| sub | Aligns the element as it was subscript |
| super | Aligns the element as it was superscript |
| top | The top of the element is aligned with the top of the
tallest element on the line
|
| text-top | The top of the element is aligned with the top of
the parent element’s font
|
| middle | The element is placed in the middle of the parent element |
| bottom | The bottom of the element is aligned with the
lowest element on the line
|
| text-bottom | The bottom of the element is aligned with the
bottom of the parent element’s font
|
| inherit | Specifies that the value of the vertical-align property
should be inherited from the parent element
|
What Is Vertical Align?
Posted 3 years, 6 months ago at 2:59 am. 0 comments
CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it’s use a little bit. The basic usage is like this:
img {
vertical-align: middle;
}
Notice in this usage case, it is being applied to the img element. Images are naturally inline elements, meaning they sit right inline with text if they are able to. But what does “sit inline” mean exactly? That is where vertical-align comes in.
The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage.
The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. Douglas Heriot has a good roundup of methods on In The Woods of ways to do this.
Baseline
The default value of vertical-align (if you declare nothing), is baseline. Images will line up with the text at the baseline of the text. Note that descenders on letters dip below the baseline. Images don’t line up with the lowest point of the descenders, that isn’t the baseline.
Middle
Perhaps the most common use for vertical-align is setting it to ‘middle’ on icon-size images. The results are generally consistent cross-browser:
The browser does the best job it can centering the pixel height of the text with the pixel height of the image:
Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be:
Text-bottom
Different from the baseline of type, is the bottom of text, where the descenders go down to. Images can be aligned with this depth as well:
Text-top
Opposite of text-bottom, is text-top, the highest point of the current font-size. You can align to this as well. Note that the current font, Georgia, probably has some ascenders taller than those represented here hence the small gap.
Top & Bottom
Top and Bottom work similarly to text-top and text-bottom, but they are not constrained by text but rather by anything at all on that line (like another image). So if there were two images on the same line, of different heights and both larger than the text on that line, their tops (or bottoms) would align regardless of that text size.
Sub & Super
These values stand for superscript and subscript, so elements aligned with these methods align themselves as such:
Vertical Align on Table Cells
Unlike images, table cells default to middle vertical alignment:
If you would rather see that text aligned to the top or bottom of the cell when it needs to stretch beyond the height that it needs, apply top or bottom vertical-alignment:
When using vertical-align on table cells, sticking with top, bottom, and middle is your best bet. None of the other values make a whole lot of sense anyway, and have unpredictable cross browser results. For example, setting a cell to text-bottom aligns the text to the bottom in IE 6, and to the top in Safari 4. Setting it to sub causes middle alignment in IE 6 and top in Safari 4.
Vertical Align and Inline-Block
Images, while technically inline level elements, behave more like inline-block elements. You can set their width and height and they obey that, unlike most inline elements.
Inline-block elements behave just like images with vertical align, so refer to the above. However, be aware that not all browsers treat inline-block elements the same way, so vertical-align may be the least of your worries. That’s another story though….
Deprecated as an attribute
Occasionally you will see “valign” used on table cells to accomplish vertical alignment. e.g. <td valign=top>. It should be noted that this attribute is deprecated and should not be used. There really isn’t any reason for it anyway as you can do it with CSS anyway.
Nhận xét
Đăng nhận xét