Вертикальное и горизонтальное выравнивание в CSS

У меня возникли проблемы с выравниванием формы, как по вертикали, так и по горизонтали.Вертикальное и горизонтальное выравнивание в CSS

Я не возражаю, если это не поддерживает IE. Я планирую реализовать сценарий обнаружения IE, чтобы сообщить пользователю использовать другой браузер, но поддержка Firefox и Chrome является обязательной.

Вот что я в настоящее время:

HTML

<!DOCTYPE html> 
<head> 
    <link rel="stylesheet" type="text/css" href="global.css"> 
    <link rel="stylesheet" type="text/css" href="index.css"> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="logo_div"> 
      <img src="../images/logo.png" id="logo"> 
     </div> 

     <div id="login"> 
      <form name="searchform" action="checklogin.php" method="post" id="login_form"> 
      <br> 
       User Name : <input type="text" name="myusername" size="16" /><br> 
       Password : <input type="password" name="mypassword" /><br> 
       <input type="submit" value="Login" /><br> 
      </form> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

Global CSS

#wrapper { 
    position: relative; 
    max-width: 1024px; 
    height: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 
#logo_div { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
} 

#logo { 
    display: block; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

Индекс CSS

#login { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
} 
#login_form { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
}

Любая помощь приветствуется. Thanks

источник

2013-05-02 David

[примеры] (http://www.freshdesignweb.com/beautiful-css-html- login-form-templates.html) для дизайна входа в систему с живой демонстрацией –

[jsfiddle] (http://jsfiddle.net/s2zsV/) для оформления одной формы –

Возможный дубликат: http://stackoverflow.com/questions/6590419/align-vertical-and-horizontal-align? rq = 1 –

Вы хотите что-то вроде этого?

попробовать этот CSS

#login{ 
    position:absolute; 
    left:50%; 
    top:50%; 

    margin-left:-120px; 
    margin-top:-60px; 

    border:1px solid #ccc; 
    width:240px; 
    height:120px; 
}

Если вы хотите, форма центрируется по вертикали и по горизонтали, можно использовать положение атрибута CSS: абсолютный; а затем использовать левый: 50%; top: 50% для выравнивания верхнего левого угла div до центра браузера. Но ваше Div не будет сосредоточено на этом. потому что он находится в центре окна в верхнем левом углу. Я просто использовал отрицательный запас с половиной ширины и высоты div, чтобы центрировать его правильно.

Надеюсь, это то, что вы ищете.

Спасибо Bojangles, за предложение!

источник

2013-05-02 15:26:04 Osho

К сожалению, JSFiddle просто отправился в автономный режим навсегда. Теперь ваш ответ бесполезен. Расширьте свой ответ, чтобы включить соответствующий код и объяснение того, что вы сделали – Bojangles

Прямо сейчас ваш #login div использует 100% ширины страницы, вам нужно установить меньшую ширину, чтобы она могла быть центрирована правильно. И вы можете расположить его в центре по вертикали, установив сверху 50% высоты минус DIV/2

как этот

#login 
{ 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
    top: 50%; 
    margin-top:-50px; 
}

источник

2013-05-02 15:32:53 StuMx

Вертикальное и горизонтальное выравнивание в CSS

ответ

Смежные вопросы