Как центрировать текст с помощью CSS?

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

Пара вопросов.

1. Родительский контейнер .slickreporting установлен в position: absolute;, и устанавливается в left: 30px;. Он также ограничен width: 90%. Я рекомендую сделать left: 0 и width: 100%;, так что центральная точка находится посередине.

   .slickreporting { 
       bottom: 108px; 
       left: 0; 
       position: absolute; 
       width: 100%; 
   } 
   

2. .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%; 
   } 
   

3. Удалить маржинальные по умолчанию/отступов от вашего FIELDSET (потому что вы используете абсолютное левое позиционирование, вы хотите, чтобы все элементы выстраиваться):

   .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; 

}