Wyśrodkowanie formularza poziomego

pytanie zadane 15 marca 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)

Witam.

Borykam się z banalnym problemem, otóż chcę zrobić przyklejone menu logowania w poziomie. Jestem w momencie gdzie nie mogę wyśrodkować samego formularza type=text (login i hasło), ponieważ gdy używam funkcji display-block i margin-left auto, margin-right:auto formularz układa się jeden pod drugim (jest wyśrodkowany, lecz chcę aby login i hasło było w poziomie). Czego mi brakuję?


<!DOCTYPE html>
<html lang="pl">
<head>
    <title></title>
    <meta charset="utf-8">
    <style>
      body
      {
      	background-image: url(img/wallpaper.png);
      	color:black;
      	margin:0px;
      }
   #container
   {
   	background-color:#1E7BC1;
   	margin-top: 100px;
   	margin-left: auto;
   	margin-right: auto;
   	height: 80px;
   	width: 100%;
   	-webkit-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
    -moz-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
    box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
   }

   .center
   {
   	height: 80px;
   	width: 400px;
   	margin-left: auto;
   	margin-right: auto;
   	
   }
  
   input[type=text]
   {
   	
   	width: 50px;
   	margin-top: 15px;
   	margin-left: auto;
   	margin-right: auto;
   	
   }

   input[type=submit]
   {
   	margin-top: 15px;
   	margin-left: auto;
   	margin-right: auto;
   	width: 100px;
   	display: block;

   }
    </style>
   
</head>
<body>

<div id="container">
	<div class="center">
	<form>
 
  		 <input type="text"  value="login">
 
 		<input type="text"  value="haslo" >

 		 <input type="submit" value="Zaloguj się">

	</form>
	</div>
</div>
</body>
</html>

1 odpowiedź

odpowiedź 15 marca 2017 przez pablop76 VIP (123,180 p.)
wybrane 15 marca 2017 przez Karol Loczeski

Najlepsza

Witam. #container ma width 100% więc nie trzeba go centrować. Daj mu text-align: center; oraz line-height = jego wysokości. Usuń tag i klase.center daj dla inputów display: inline-block; To spowoduje potraktowanie ich jak elementy liniowe przez container i ustawi je centralnie( bo text-align: center w container) line-height równe wysokości kontenera spowoduje wycentrowanie w pionie inputów. Usuń margin-top line-height się tym zajmie.

komentarz 15 marca 2017 przez Karol Loczeski Użytkownik (820 p.)

Super, dzięki za odp.

Jeszcze jedno, a jeśli przycisk "zaloguj" chciałbym pod formularzem mieć to muszę zrobić dla niego osobną klasę ?

komentarz 15 marca 2017 przez pablop76 VIP (123,180 p.)

Wystarczy display: block; dla submita ale line-height będzię trzeba prawdopodobnie zmienić.

komentarz 15 marca 2017 przez pablop76 VIP (123,180 p.)

<html lang="pl">
<head>
<title></title>
<meta charset="utf-8">

</head>
<body>

<div id="container">

<form>

<input type="text" value="login">

<input type="text" value="hasło" >

<input type="submit" value="Zaloguj się">

</form>
</div>
</body>
</html>

body
{
background-image: url(img/wallpaper.png);
color:black;
margin:0px;
}
#container
{
background-color:#1E7BC1;
height: 80px;
width: 100%;
  text-align: center;
  line-height: 45px;
-webkit-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
-moz-box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
box-shadow: 0px 0px 20px 2px rgba(30,123,193,1);
}
input[type=text]
{
width: 50px;
  display:inline-block;
}
input[type=submit]
{
display: block;
margin: 0 auto;
}