Пре него што смо имали да се носе са ЦСС-ом да креирате своје распореде странице, усклађивању неки садржај унутар ћелије табеле изгледало само дечија игра. Једноставно подесите "алигн" или "валигн" власништво табеле да имају поравнање по вашем избору, комад торте!
Са ЦСС распореда, мада имамо "вертицал-алигн" имовину за елементе, не изгледа да буде једноставно као "алигн" или "валигн" својстава. Да би више специфииц "вертицал-алигн" никада не изгледа да реши ниједан од ваших проблема, посебно ако се напише комад крос-бровсер ЦСС.
Без коришћења ХТМЛ табела, ПРОБЛЕМ центрирање на објекту, било да слика или неки текст који садржи унутар поделе, вероватно је био сваки УИ / ЦСС програмери ноћна мора у неком тренутку. Овај проблем додатно ектраполатес ваше бриге о усклађивању, ако објекат да буде центриран је динамичан у природи, односно када је њена висина је променљива (непозната висина).
Иако не постоји познати равно напред решење које ће радити преко опсега претраживача морамо бавити, решење које сам покушао да дође изгледа да раде у неколико прегледачима које сам пробао у (ИЕ6, ИЕ 7 , фф).
РЕШЕЊЕ:
У прегледачима као што су Мозилла, Опера и Сафари и чудно се понаша "вертицал-алигн" имовина може бити изведени пред својим чулима, једноставно постављање "Екран" имовину која садржи поделе на "стони ћелије" (приказ: табела-ћелија) .
Проблем и даље остаје са ИЕ бровсер породице, који, ипак изгледа да не разуме шта то са "табле-целл" имовине и незналице као што су они, само они га игноришу. Решење дато у наставку, иако једноставне, рекламе неколико ДОМ више елемената у ХТМЛ да би се ствари дешавају.
ЦСС и ХТМЛ изгледа овако
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}
ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер">
<див цласс="обј"> <имг срц="имаге1.јпг"/> <бр/> виевс: 3456 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
видите овде демо се | Довнлоад изворне датотеке (Довнлоадед 451 тимес)
Разумевање решење: За претраживаче који разумеју Приказ: табеле и приказ: табела-карактеристике ћелија, то ретко потребно никакво објашњење. За ИЕ, уз коришћење ИЕ специфичан хацк (хеш хацк), ми смо апсолутно позиционира контејнер објекат (обј_цонтаинер) у половини висине расположивог. Тада објекат (обј) у оквиру позиција је релативно и преселио се за половину своје висине ... Па! Чини ми се да разумем изглед на Вашем лицу, али ради. Пробајте! Поменуте технике се комбинују да дају нам крст изнад решење прегледача.
ЦСС може да се лако модификује као испод да се постигне, вертицал-алигн: топ или вертицал-алигн: боттом ТОП Поравнај ЦСС
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}
ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_топ">
<див цласс="обј_топ"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
БОТТОМ Поравнај ЦСС
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
ХТМЛ је: -
<див цласс="оутер_цонтаинер">
<див цласс="обј_цонтаинер_боттом">
<див цласс="обј_боттом"> <имг срц="имаге1.јпг"/> <бр/> виевс: 1234 </ див>
</ Див>
</ Див>
Резултат изгледа овако: -
видите овде демо | Довнлоад овде
Хоризонтална центрирање објекта једноставно постићи са маргине имовине, тако што ћете подесити маргин-лефт и маргин-боттом да аутоматски Изгледа као стари, јер сам покушавао да пронађе разумно решење овог проблема поравнање. Али сада са овим решењем, осећам се мало на миру.
Са надом да Сомедаи
- вертикално поравнавање-имовина у ЦСС ће радити као да ради унутар ћелије табеле, без потребе да се пуно туку око грма
- У најмању руку, подешавање маргин: ауто и маргин-боттом: Ауто, даће као резултат исти као и са паддинг-лефт и маргин-боттом подесити на Ауто
- У Бровсер ратови ће бити у неком дану.
- Ту ће само ЈЕДАН претраживач за СВЕ.
Преузмите ЦСС и ХТМЛ горе наведеног решења овде (Довнлоадед 451 тимес) .. за разумљивост, ЦСС није оптимизована
ПС: И узгред, они су сличице неких слика које сам кликнули ... 
