Преди трябваше да се справим с CSS да се създаде нашата страница оформления, привеждане на част от съдържанието вътре в клетката на таблицата изглежда просто детето игра. Просто настройте "Подравняване" или "valign", собственост на масата, за да има привеждане в съответствие на вашия избор, парче от тортата!
С оформления на СГО, че имаме "вертикална-align" имот за елементите, тя не изглежда да е толкова просто като "Подравняване" или "valign" свойства. За да бъде по-specifiic "вертикална-align" никога не изглежда да решат вашите проблеми, особено ако се напише парче от кръста браузър CSS.
Без използването на HTML таблици, проблемът центриране на обекта, да бъде изображение или някакъв текст в рамките на съдържащи дивизия, вероятно е всеки UI / CSS разработчици кошмар в някакъв момент. Този проблем допълнително екстраполира вашите притеснения на изравняване, ако е динамичен обект, за да бъдат центрирани в природата, т.е. когато височината му е променлива (неизвестно височина).
Въпреки че има известни никакви правилно решение, че ще работи в целия диапазон от браузъри, ние трябва да се справят с решение, че съм опитал да стигне до прави изглежда да работят в няколко браузъри, които са опитвали в (IE6, IE 7 , FF).
РЕШЕНИЕ:
В браузъри като Mozilla, Opera и Safari, странно поведение "вертикална-align" собственост може да бъде доведен до сетивата си, просто чрез създаване собственост на "Дисплей", съдържащи разделение "Таблица клетка" (показване на маса клетка) .
Проблемът все още остава с IE семейството на браузъри, които все още не изглежда да се разбере какво трябва да с "маса клетка", собственост и невежи, тъй като те са, те просто го игнорирайте. Решението, дадени по-долу, макар и прости, реклами няколко повече от DOM елементи в HTML, за да направим нещата да се случват.
CSS и HTML изглежда така
.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;
}
HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> За показвания: 3456 </ div>
</ Div>
</ Div>
Резултатът изглежда така: -
Вижте демото тук | Изтегли изходни файлове (Свалено 454 пъти)
Разбиране на решение: За браузъри, които разбират дисплей: маса и дисплей маса клетки свойства, тя рядко се нуждае от никакво обяснение. За IE, с използването на IE специфичен хак (хеш хак), ние абсолютно позициониране на обект контейнер (obj_container), в половината от наличната височина. Тогава обект (OBJ) в рамките на е позицията относително и се премества от половината от височината му ... Е! Аз изглежда да се разбере на външния вид на лицето си, но тя работи. Опитайте го! Горните техники се комбинират, за да ни даде решение на горното напречно браузър.
CSS може да бъде лесно модифицирана по-долу, за да се постигне, вертикално-align: отгоре или вертикално-align: дъното TOP Подравняване CSS
.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;
}
HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> За на показвания: 1234 </ div>
</ Div>
</ Div>
Резултатът изглежда така: -
ДОЛНО Подравняване CSS
.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;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> За на показвания: 1234 </ div>
</ Div>
</ Div>
Резултатът изглежда така: -
Вижте демото тук | свалите от тук
Хоризонтално центриране на обект, който просто се постига с марж собственост, чрез определяне на марж-ляво и марж-надясно за автоматично Изглежда възраст, тъй като аз се опитвах да се намери разумно решение на проблема с това привеждане в съответствие. Но сега с това решение, аз се чувствам малко спокойствие.
С надеждата, че някой ден
- вертикално подравняване имот в CSS ще работи като го прави вътре в клетката на таблицата, без да бие много заобикалки
- Най-малко, определяне на марж върха: авто и марж-отдолу: Автоматично, ще даде същия резултат, както с марж ляв и марж-надясно автоматично
- Браузър войните ще бъде над един ден.
- Ще има само един браузър за всички.
Изтеглете CSS и HTML на горния разтвор тук (, Изтеглили 454 пъти) .. за разбираемост, CSS не се е оптимизиран
PS: И между другото, това са миниатюри на някои картини, които са кликнали върху ... 
