CSS, центриране на съдържанието в <DIV>...

S

sizif

Registered
Здравейте!

Пренасям темата от РНР-раздела тук, защото касае съвсем конкретно стиловете:

В таг <DIV> поставям изображение. Големината на "кутийката" умишлено е по-голяма от изображението. Каква е командата, за да поставя снимката в центъра на изчертаната от див-а кутийка. Или иначе казано, какви са "алтернативните" команди за разполагане на съдържание: <TD ALIGN="CENTER" VALIGN="MIDDLE">

Научих, че селектора text-align: center; задава центриране в ляво и дясно, но какво е центрирането по отношение на горната и долната рамка на див-а?

Благодаря предварително!
 
sizif каза:
Здравейте!

Пренасям темата от РНР-раздела тук, защото касае съвсем конкретно стиловете:

В таг <DIV> поставям изображение. Големината на "кутийката" умишлено е по-голяма от изображението. Каква е командата, за да поставя снимката в центъра на изчертаната от див-а кутийка. Или иначе казано, какви са "алтернативните" команди за разполагане на съдържание: <TD ALIGN="CENTER" VALIGN="MIDDLE">

Научих, че селектора text-align: center; задава центриране в ляво и дясно, но какво е центрирането по отношение на горната и долната рамка на див-а?

Благодаря предварително!
Увеличете...

За

<TD ALIGN="CENTER" VALIGN="TOP">

и

<TD ALIGN="CENTER" VALIGN="BOTTOM">

ли става дума? :)
 
Здравей!

Не с хтмл-таговете за подравняване се оправям отдавна, интересуват ме техните "алтернативни" селектори в CSS. Само че конкретно за див?

Ако това е в ХТМЛ:
<TD ALIGN="CENTER" VALIGN="MIDDLE">

Как е за див в CSS?
div.m{width:169px; height:169px;float:left; margin: 10px 5px 0px 5px; text-align: center; border:solid 1px red}
 
Благодаря! Ще пробвам. Не знам обаче дали ще върши работа, защото снимките са с различен размер (но без да надвишават размера на див-а).

Дано стане :)
 
за вертикален алигмент се използва vertical-align http://www.w3schools.com/css/pr_pos_vertical-align.asp но в случая няма да ти върши работа доколкото знам valign не работи при блокови елементи
ако искаш пробвай като зададеш display:inline; vertical-align:middle не съм пробвал и не знам дали ще проработи
височината на картинките винаги еднаква ли е ?

п.с. виждам че и дидо е дал подобен отговор с display: table-cell което е другия възможен начин и дано стане ;)
 
Пфф.. и аз опитвах ли опитвах, но нещо не се получава :?

Примерно имаш...

<div style="border:1px solid #000;background:#f1f1f1;width:600;height:200;">
<img src="snimka.gif" width="400" height="100" border="1"></div>

...и искаш снимката да е в центъра, но използвайки css за целта, нали?! Ще се поровя малко в нета и ако намеря решението ще пиша. :?:
 
Здравейте!

Наистина мъчна задача :)

Пробвах със селекторите, които Dido_net предложи, но изчертаха всички снимки, листнати от цикъла една върху друга :(

Ще пробвам и това, кеото ми предлагаш, mute, (рових из бг-страници за стиловете, но не намерих никакви отговори) дано стане , ако не ще мъча да сложа в див тага <ТД> и да му задам стойности. Поне ИЕ отдава приоритет на вътрешните команди над външните стилове, но се надявам, че самия див-таг ще ги позволи, за да няма разминаване при други браузъри...

DJCharge, благодаря за вниманието към проблема! :)

ПП: mute, не мръднаха от местата си :( Но от див-овете не мога да се откажа... Остава варианта вътре в тях да сложа таблици...

"Великият закон за протезата" (свободни интерпретации по Ст. Лем ;) ) проработи поне при ИЕ:

$pic= "<div class=\"m\"><TABLE CELLSPACING=0 BORDER=0 CELLPADDING=0 WIDTH=100% HEIGHT=100%><TR><TD ALIGN='CENTER' VALIGN='MIDDLE'><A HREF='$img_name'><IMG SRC='$thumb_name' border=0></A></TD></TR></TABLE></div>";

Не разполагам с друг браузър в момента освен ИЕ, там вертикалното центриране се получава. Дано върви и при останалите....

Благодаря, че ми отделихте време!

Хубава нощ!
 
Здрасти днес разглеждах един друг форум и явно някои има твоя проблем ето и отговора http://milov.nl/code/css/verticalcenter.html
не знам дали ще ти свърши работа защото тук явно ще трябва да взимаш ширината и височината на всяка картинка.
 
Благодаря, mute! :)

Ще погледна темата, макар че засега реших проблема с таблица в див-а... :D
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе