• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowanie formularza poziomego

Aruba Cloud - Virtual Private Server VPS
0 głosów
795 wizyt
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ź

+1 głos
odpowiedź 15 marca 2017 przez pablop76 VIP (123,540 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,540 p.)
Wystarczy display: block; dla submita ale line-height będzię trzeba prawdopodobnie zmienić.
komentarz 15 marca 2017 przez pablop76 VIP (123,540 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;
}

 

komentarz 15 marca 2017 przez Karol Loczeski Użytkownik (820 p.)
Dziękuję, działa :)

Podobne pytania

0 głosów
1 odpowiedź 424 wizyt
+1 głos
2 odpowiedzi 3,227 wizyt
pytanie zadane 6 marca 2018 w HTML i CSS przez BIREXD Obywatel (1,180 p.)
0 głosów
4 odpowiedzi 11,042 wizyt
pytanie zadane 11 marca 2017 w HTML i CSS przez bartek712 Nowicjusz (140 p.)

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

62,657 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...