文本小部件中元素的大小和位置

时间:2017-03-19 04:18:58

标签: css height centering contact-form-7

我无法居中并修改插入位于我网站左下角的文本小部件中的联系表单的高度。

http://www.durocketdescarottes.fr/

我想降低表格的高度并使其水平居中。

我试过这个CSS片段:

/* Contact form customization */
.wpcf7{
  	height: 20%;
  	max-width: 50%;
  	margin: auto;
}

更改max-width属性会改变表单的宽度,但我无法使用通常的“margin:auto;”将其置于窗口小部件区域中心。特技。

更改height属性不起作用。

编辑:在D_S_B建议之后,我尝试设置div.wpcf7的样式,但我的更改没有出现在我的页面的CSS样式中。发生了什么事?

非常感谢你的帮助,

本杰明

2 个答案:

答案 0 :(得分:0)

快速浏览一下你的css,看起来有些样式应用于div.wpcf7,以及你从.wpcf7发布的样式。

styles inspector

应用的类是div.wpcf7比没有div选择器的类更具体,因此您应用于类的任何余量都将被边距覆盖:0应用于div.wpcf7。

如果你将你的类的范围扩展到div.wpcf7并添加一个边距:0,那么它会按预期级联,并为你的表格水平居中。

答案 1 :(得分:0)

我通过下载Contact Form 7 style plugin解决了我的问题。它用附加类包装表单,使自定义变得容易。