Question

您可以在此处查看我的表单：

http://www.escalateinternet.com/free-quote.php

如果单击底部的按钮提交表单，您将看到一条错误消息弹出窗口，提示您需要输入您的姓名。谁能告诉我为什么错误信息没有正确居中？

以下是我在CSS中使用的代码：

.errorcontainer{
    width:90%;
    height:25px;
    padding-top:17px;
    font-size:12pt;
    font-family: 'Droid Sans', sans-serif;
    color:#FF0000;
    display:none;
    text-align:center;
}

我需要更改哪些内容才能正确定位错误消息？

Answer 1

有几个问题。

父容器.slickreporting设置为position: absolute;，并设置为left: 30px;。它也仅限于width: 90%。我建议制作left: 0和width: 100%;，使其中心位于中间位置。
```
.slickreporting {
    bottom: 108px;
    left: 0;
    position: absolute;
    width: 100%;
}
```

您的.errorcontainer设置为width: 90%;，这意味着它的中心点将略微向左。将其设置为width: 100%;

.errorcontainer {
    color: #FF0000;
     display: block;
     font-family: 'Droid Sans',sans-serif;
     font-size: 12pt;
     height: 25px;
     margin: 0 auto;
     padding-top: 17px;
     text-align: center;
     width: 100%;
 }

从字段集中删除默认边距/填充（因为您使用绝对左侧定位，您希望所有元素都排成一行）：
```
.slickwrap fieldset {
    border: 0 none;
    margin: 0;
    padding: 0;
}
```

Answer 2

.errorcontainer的宽度为90％..

要使其居中，您可以将左/右边距设置为自动..

margin:0 auto;

Answer 3

尝试：

.errorcontainer{
  width:90%;
  height:25px;
  padding-top:17px;
  font-size:12pt;
  font-family: 'Droid Sans', sans-serif;
  color:#FF0000;
  display:none;
  text-align:center;
  margin-left:auto;
  margin-right:auto;

}

如何使用CSS居中文本？

3 个答案: