登录 注册

登录

问题 怎样修改css,才能让模块的栏目标题上下居中显示?

更多
2008年10月17日 03:44 - 2008年10月17日 03:48 #1 作者: jml2008
一个模块显示栏目标题(Latest News)代码:

<div class="moduletable_customcode1">
<h3>Latest News</h3>
</div>
想要的结果是让栏目标题显示在背景图片上,且栏目标题上下居中显示.

所用到的CSS为:
.moduletable_customcode1{
margin-bottom:10px;
padding:0px 0px 10px 0px;/*padding for inside text*/
overflow:hidden;
border:1px solid #727FCF;
background-color:#ffffff;
}


.moduletable_customcode1 h3 {
height:40px;
text-transform: capitalize;
font: bold 130%/normal Cambria, "Times New Roman", Times, serif;
background: url(../modules/customcode/scripts/css/tablebg.jpg);
}

本来想让栏目标题(Latest News)上下居中显示,但是显示的栏目标题却在上方,如图1.CSS有text-align:center,但是这个属性只能左右居中显示,而CSS又没有text-valign:middle 这个属性.
因此,对让标题上下居中显示制造了困难.而css的vertical-align 在我用时,又不启什么效果.于是想到了margin-top,把它设为10px,结果背景图片和栏目标题同时下移,在栏目标题的上方出现了一块高为10px矩形空白区域,标题还是没有上下居中显示.如图2.

在网上查了半天,也没有找到解决的办法.这儿用joomla的同学很多,有遇到类似的问题的吗?应当怎么解决才好呢?
最后修改: 2008年10月17日 03:48 由 bizcheers.

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月17日 08:17 #2 作者: Joomla之门
margin 当然会让图片一起下移,如果用 padding-top 可能就好一些。

尝试一下修改为:
.moduletable_customcode1 h3 {
height:40px;
text-transform: capitalize;
font: bold 130%/normal Cambria, "Times New Roman", Times, serif;
background: url(../modules/customcode/scripts/css/tablebg.jpg);
padding-top:15px;
}
 

如果要针对单个模块调整,参看: 什么是模块 CSS 类后缀

付费下载 Joomla 3 扩展汉化版: 我要付费支持 Joomla 之门!

登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月17日 14:44 #3 作者: jml2008
按白老大说的,修改为:

.moduletable_customcode1 h3 {
height:40px;
text-transform: capitalize;
font: bold 130%/normal Cambria, "Times New Roman", Times, serif;
background: url(../modules/customcode/scripts/css/tablebg.jpg);
padding-top:15px;
}

栏目标题果然下移,而背景图片没有随着下移.如下图.

我只曾尝试在moduletable_customcode1中修改padding,
.moduletable_customcode1{
margin-bottom:10px;
padding:0px 0px 10px 0px;/*padding for inside text*/
overflow:hidden;
border:1px solid #727FCF;
background-color:#ffffff;
}

设置:padding:10px 0px 10px 0px;  但效果是栏目标题与背景图片同时下移,也就是说,这一级的padding对栏目标题与背景同时启作用. 应当在下一级的css中,对padding进行设置,即白老大说的在 .moduletable_customcode1 h3 对padding进行设置.

css真是很细腻!joomla也很强大,正如这里的一位同学说的,你的网站做的如何,就看你对joomla 领悟的如何.

真心谢谢白老大! :)


登录 或者   注册一个会员帐号 来参与讨论

更多
2008年10月23日 21:59 #4 作者: stanley3333
可以試試用line-height,很多用這即可達居中狀態

登录 或者   注册一个会员帐号 来参与讨论