Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.56/9: Рейтинг темы: голосов - 9, средняя оценка - 4.56
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
1

Отцентрировать текст с картинкой в одном div

20.12.2012, 22:47. Показов 1750. Ответов 9
Метки нет (Все метки)

Помогите отцентрировать текст с картинкой в одном div. Прочитал кучу всякой информации но так и ничего не получилось. И с display: table-cell; vertical-align: middle; тоже не подружился я ((.

Вот текущий код этого блока

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* begin Box, BlockContent */
.art-BlockContent
{
    position:relative;
    z-index:0;
    margin:0 auto;
    min-width:1px;
    min-height:1px;
}
 
.art-BlockContent-body
{
    position: relative;
    z-index:1;
    padding: 10px 2px 10px 2px;
}
 
 
 
.art-BlockContent-body
{
    color:#ffffff;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 13px;
    font-style: normal;
    font-weight: bold;
    display: block;
    text-align: center;
    text-shadow: 2px 2px 0px #333;
    
}
 
.art-BlockContent-body a:link
{
    color: #ffffff;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
        font-weight: bold;
    padding: 0px;
    margin: 0;
    margin-bottom: 2px;
    width: 190px;
        height: 24px;
    background: url('../images/ButtonMenu.png') center top no-repeat;
        display: block;
}
 
 
 
.art-BlockContent-body a:hover, .art-BlockContent-body a.hover
{
    color: #ffffff;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    background-position: bottom;
    text-shadow: 2px 2px 0px #999;
    -webkit-animation: linkhover 1.95s 1 ease; /* +Add */
    -moz-animation: linkhover 1.95s 1 ease; /* +Add */
    -o-animation: linkhover 1.95s 1 ease; /* +Add */
 
}
 
.art-BlockContent-body a:active, .art-BlockContent-body a.active
{
background-position: 0px -48px;
}
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Миниатюры
Отцентрировать текст с картинкой в одном div  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.12.2012, 22:47
Ответы с готовыми решениями:

Текст на одном уровни с картинкой
<html><head><title>Лаба 1_9 </title> <link href="index.css" rel="stylesheet"...

отцентрировать div в IE
Привет всем! Хотел сделать модально окно для вроде норм работает но в IE margin:auto не...

Отцентрировать абсолютно позиционированный div
Как отцентрировать абсолютно позиционированный div?

Отцентрировать блоки div не через flex
Только начал учиться вёрстке, вот решил сверстать рандомный psd макет. Проблемы появились уже во...

9
работяга
368 / 368 / 52
Регистрация: 23.05.2010
Сообщений: 947
21.12.2012, 02:32 2
Вот пример, разберитесь, должно помочь:
HTML5
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
#wrap {width: 500px; height:500px; background: #ccc; display: table; text-align: center;}
#wrap .inner {display: table-cell; vertical-align: middle;}
</style>
 
<div id="wrap">
    <div class="inner">
asdfsadf
    </div>
</div>
1
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
21.12.2012, 14:27  [ТС] 3
Цитата Сообщение от etalord Посмотреть сообщение
Вот пример, разберитесь, должно помочь:
HTML5
1
2
3
4
5
6
7
8
9
10
<style type="text/css">
#wrap {width: 500px; height:500px; background: #ccc; display: table; text-align: center;}
#wrap .inner {display: table-cell; vertical-align: middle;}
</style>
 
<div id="wrap">
    <div class="inner">
asdfsadf
    </div>
</div>
Спасибо! Буду разбираться.
0
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
22.12.2012, 20:12  [ТС] 4
Вообщем я так и не нашел куда вставить этот код, чтобы он работал ровно (если вставлять в шаблон джумлы, его перекрывает код из VIRTUEMART). Я так и не нашел в виртуалмарте кусок кода, который создает мои кнопочки в виде display: block; (видно на скрине внизу). Может есть способ сделать это проще или может кто-нить знает именно ту часть кода, которая отвечает за это?? Версия марта 1.1.6.
0
Миниатюры
Отцентрировать текст с картинкой в одном div  
работяга
368 / 368 / 52
Регистрация: 23.05.2010
Сообщений: 947
22.12.2012, 20:27 5
Пробовали делать поиск по тексту в файлах 'class="mainlevel"'? Если повезет, найдёте нужный участок кода.
1
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
22.12.2012, 23:36  [ТС] 6
Цитата Сообщение от etalord Посмотреть сообщение
Пробовали делать поиск по тексту в файлах 'class="mainlevel"'? Если повезет, найдёте нужный участок кода.
Повезло, нашел, но не работает... (118-126 строчки). опять отображается как :block((

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
global $mosConfig_live_site, $mainframe, $root_label, $jscook_type, $jscookMenu_style, $jscookTree_style, $ps_product_category;
require_once( CLASSPATH . 'ps_product_category.php' );
if( !isset( $ps_product_category )) $ps_product_category = new ps_product_category;
 
 
if( !class_exists('vmCategoryTree')) {
class vmCategoryTree {
    /***************************************************
    * function traverse_tree_down
    */
    function traverse_tree_down(&$mymenu_content, $category_id='0', $level='0') {
        static $ibg = -1;
        global $mosConfig_live_site, $sess;
        $db = new ps_DB();
        $level++;
        $query = "SELECT category_name, category_id, category_child_id "
        . "FROM #__{vm}_category as a, #__{vm}_category_xref as b "
        . "WHERE a.category_publish='Y' AND "
        . " b.category_parent_id='$category_id' AND a.category_id=b.category_child_id "
        . "ORDER BY category_parent_id, list_order, category_name ASC";
        $db->query( $query );
 
        while( $db->next_record() ) {
            $ibg++;
            $Treeid = $ibg == 0 ? 1 : $ibg;
            $itemid = '&Itemid='.$sess->getShopItemid();
            $mymenu_content.= ",\n[null,'".$db->f("category_name",false);
            $mymenu_content.= ps_product_category::products_in_category( $db->f("category_id") );
            $mymenu_content.= "','".sefRelToAbs('index.php?option=com_virtuemart&page=shop.browse&category_id='.$db->f("category_id").$itemid."&TreeId=$Treeid")."','_self','".$db->f("category_name",false)."'\n ";
 
            /* recurse through the subcategories */
            $this->traverse_tree_down($mymenu_content, $db->f("category_child_id"), $level);
 
            /* let's see if the loop has reached its end */
            $mymenu_content.= "]";
 
        }
    }
}
}
/************* END OF CATEGORY TREE ******************************
*********************************************************
*/
 
if( !class_exists('vmCategoryMenu')) {
class vmCategoryMenu {
    /***************************************************
    * function traverse_tree_down
    */
    function traverse_tree_down(&$mymenu_content, $category_id='0', $level='0') {
        static $ibg = 0;
        global $mosConfig_live_site, $sess;
        $level++;
        $query = "SELECT category_name, category_id, category_child_id "
        . "FROM #__{vm}_category as a, #__{vm}_category_xref as b "
        . "WHERE a.category_publish='Y' AND "
        . " b.category_parent_id='$category_id' AND a.category_id=b.category_child_id "
        . "ORDER BY category_parent_id, list_order, category_name ASC";
        $db = new ps_DB();
        $db->query( $query );
 
        while($db->next_record()) {
            $itemid = '&Itemid='.$sess->getShopItemid();
            if( $ibg != 0 )
            $mymenu_content.= ",";
 
            $mymenu_content.= "\n[ '<img src=\"' + ctThemeXPBase + 'darrow.png\" alt=\"arr\" />','".$db->f("category_name",false)."','".sefRelToAbs('index.php?option=com_virtuemart&page=shop.browse&category_id='.$db->f("category_id").$itemid)."',null,'".$db->f("category_name",false)."'\n ";
 
            $ibg++;
 
            /* recurse through the subcategories */
            $this->traverse_tree_down($mymenu_content, $db->f("category_child_id"), $level);
 
            /* let's see if the loop has reached its end */
            $mymenu_content.= "]";
        }
    }
}
}
 
 
$Itemid = vmRequest::getInt( 'Itemid' );
$TreeId = vmRequest::getInt( 'TreeId' );
 
if( vmIsJoomla('1.5')) {
    $js_src = $mosConfig_live_site.'/modules/mod_virtuemart';
} else {
    $js_src = $mosConfig_live_site.'/modules';
}
echo vmCommonHTML::scriptTag( '', 'var ctThemeXPBase = "'.$js_src.'/ThemeXP/";' );
if( $jscook_type == "tree" ) {
 
    if($jscookTree_style == "ThemeXP") {
        $jscook_tree = "ctThemeXP1";
    }
    if($jscookTree_style == "ThemeNavy") {
        $jscook_tree = "ctThemeNavy";
    }
 
    echo vmCommonHTML::scriptTag( $js_src.'/JSCookTree.js' );
    echo vmCommonHTML::linkTag( $js_src."/$jscookTree_style/theme.css" );
    echo vmCommonHTML::scriptTag( $js_src."/$jscookTree_style/theme.js" );
 
    $vm_jscook = new vmCategoryTree();
}
else {
 
    echo vmCommonHTML::scriptTag( $mosConfig_live_site.'/includes/js/JSCookMenu.js' );
    echo vmCommonHTML::linkTag( $mosConfig_live_site."/includes/js/$jscookMenu_style/theme.css" );
    echo vmCommonHTML::scriptTag( $mosConfig_live_site."/includes/js/$jscookMenu_style/theme.js" );
 
    $vm_jscook = new vmCategoryMenu();
}
 
// create a unique tree identifier, in case multiple trees are used
// (max one per module)
$varname = "JSCook_".uniqid( $jscook_type."_" );
<style type="text/css">
#wrap {width: 190px; height:24px; background: #ccc; display: table; text-align: center;}
#wrap .inner {display: table-cell; vertical-align: middle;}
</style>
<div id="wrap">
    <div class="inner">
$menu_htmlcode = '<div 
 align="left" class="mainlevel" id="div_'.$varname.'"></div>
</div></div>
<script type="text/javascript">  
//<!--
function '.$varname.'_addEvent( obj, type, fn )
{
   if (obj.addEventListener) {
      obj.addEventListener( type, fn, false );
   } else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
      obj.attachEvent( "on"+type, obj[type+fn] );
   }
}
 
function '.$varname.'_removeEvent( obj, type, fn )
{
   if (obj.removeEventListener) {
      obj.removeEventListener( type, fn, false );
   } else if (obj.detachEvent) {
      obj.detachEvent( "on"+type, obj[type+fn] );
      obj[type+fn] = null;
      obj["e"+type+fn] = null;
   }
}
 
var '.$varname.' = 
[
';
$vm_jscook->traverse_tree_down($menu_htmlcode);
 
 
$menu_htmlcode .= "];
";
if(  $jscook_type == "tree" ) {
    $menu_htmlcode .= "var treeindex = ctDraw ('div_$varname', $varname, $jscook_tree, '$jscookTree_style', 0, 0);";
}
else {
    $menu_htmlcode .= "cmDrawNow =function() { cmDraw ('div_$varname', $varname, '$menu_orientation', cm$jscookMenu_style, '$jscookMenu_style'); };
    ".$varname."_addEvent( window, \"load\", cmDrawNow, false );";
}
 
$menu_htmlcode .="
//-->
</script>\n";
 
if(  $jscook_type == "tree" ) {
    if( $TreeId ) {
        $menu_htmlcode .= "<input type=\"hidden\" id=\"TreeId\" name=\"TreeId\" value=\"$TreeId\" />\n";
        $menu_htmlcode .= "<script language=\"JavaScript\" type=\"text/javascript\">ctExposeTreeIndex( treeindex, parseInt(ctGetObject('TreeId').value));</script>\n";
    }
}
$menu_htmlcode .= "<noscript>";
$menu_htmlcode .= $ps_product_category->get_category_tree( $category_id, $class_mainlevel );
$menu_htmlcode .= "\n</noscript>\n";
echo $menu_htmlcode;
 
?>
0
работяга
368 / 368 / 52
Регистрация: 23.05.2010
Сообщений: 947
22.12.2012, 23:56 7
Не похоже. Посмотрите сами - это <div>, а не <a>, да ещё с айдишкой.

style="display: block" может проставляться javascript-ом, посмотрите какие js подключены, и что они делают.
0
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
25.12.2012, 21:24  [ТС] 8
Цитата Сообщение от etalord Посмотреть сообщение
Не похоже. Посмотрите сами - это <div>, а не <a>, да ещё с айдишкой.

style="display: block" может проставляться javascript-ом, посмотрите какие js подключены, и что они делают.
Перебрал 13 файлов VirtueMart (из них 5 js), искал по слову "block". Заменил все "block" на table-cell - результат тот же, display: block. ((
0
работяга
368 / 368 / 52
Регистрация: 23.05.2010
Сообщений: 947
25.12.2012, 22:00 9
ну я не знаю, чем ещё помочь
согласитесь, где-то же оно задаётся
1
0 / 0 / 0
Регистрация: 20.12.2012
Сообщений: 6
25.12.2012, 22:52  [ТС] 10
Цитата Сообщение от etalord Посмотреть сообщение
ну я не знаю, чем ещё помочь
согласитесь, где-то же оно задаётся
Я продолжу поиски)

Вам огромное спасибо за помощь!
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.12.2012, 22:52

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Отцентрировать <div> и задать его ширину по содержимому
Можно ли построить отцентрованное меню, задавая ширину элементов, как у верхнего меню на...

Как отцентрировать img по высоте и ширине в div?
как отцентрировать img по высоте и ширине в div со статическими размерами, если изображение больше...

Не отцентрировать текст
Имеется блок &lt;footer&gt;КОПИРАЙТ&lt;/footer&gt; Стили footer { text-align: center; vertical-align:...

Отцентрировать текст по вертикали
Здравствуйте. Используется компонент для ввода текста RichEdit и нужно выровнять текст по центру по...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.