Skocz do zawartości
  • 0

Wyśrodkowanie diva w poziomie i pionie


Redbulek
 Udostępnij

Pytanie

10 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 0
<body>
			
				<div id="register">
				
					<div id="menu">
						
						<form action="login.php" method="POST">
						<table border="1">
						
							<tr>
								<th>Login: </th>
								<th><input type="text" name="login" /></th>
							</tr>
							
							<tr>
								<th>Hasło: </th>
								<th><input type="password" name="password" /></th>
							</tr>
							
							<tr>
								<th></th>
								<th><input type="submit" value="ZALOGUJ" /></th>
							</tr>
						
						</table>
						</form>
						
					</div>

				</div>
			
			</body>

CSS tylko tyle:

#register{
	border: 1px solid black;
	width: 500px;
	height: 300px;
	margin: auto;
}

 

barcab.png


Pomogłem? daj Lubię to!

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0
6 godzin temu, przedek napisał:

a ja polecam użyć bootstrapa ;) tam ci łatwiej pójdzie

Polecasz użyć ciężkiego kombajnu, który ma pierdylion funkcji, do wyśrodkowania diva? A słyszałeś kiedyś o czymś takim jak Response Time i Response Size?

Non omnis moriar.

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0

Zobacz to

Dodaj sobie do styli

.centered-element {
	left : 50%;
	position : absolute;
	top : 50%;
	transform : translate(-50%, -50%);
}

A pozniej uzyj

<div id="register" class="centered-element">
  <div id="menu" class="centered-element">
    <form action="login.php" method="POST">
    <table border="1">
      <tr>
        <th>Login: </th>
        <th><input type="text" name="login" /></th>
      </tr>
      <tr>
        <th>Hasło: </th>
        <th><input type="password" name="password" /></th>
      </tr>
      <tr>
        <th></th>
        <th><input type="submit" value="ZALOGUJ" /></th>
      </tr>
    </table>
    </form>
  </div>
</div>

Nie wiem po co Ci tyle tych wartstw. Jesli to jedyne obiekty na stronie podczas rejestracji to wystarczy sama form + tabela z klasa centered-element, ale nie mnie oceniac

Lepiej jest nie odzywać się wcale i pozwolić ludziom myśleć, że jesteś glupi, niż odezwać się i rozwiać wszelkie wątpliwości.
Mark Twain

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0
<div id="logowanie">
					
							<h3>Panel Logowania</h3>
						
						<form action="login.php" method="POST">
								
								<table>
									
									<tr>
										<th><input type="text" name="login" placeholder="USERNAME" /></th>
									</tr>
									
									<tr>
										<th><input type="password" name="password" placeholder="PASSWORD" /></th>
									</tr>
									
								</table>
								
								<div id="loguj">
								
									<input type="submit" value="ZALOGUJ" />
								
								</div>

css

body{
	font-family: Arial;
	font-size: 14px;
	color: #000000;

}

#logowanie {
	border: 1px solid black;
	border-radius: 10px;
	padding: 10px;
	width: 400px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	
	left : 50%;
	position : absolute;
	top : 50%;
	transform : translate(-50%, -50%);
	
	
	display: flex;
	align-items: center;
}

.error{
	border: 1px solid black;
	padding: 5px;
	background-color: #F9FF99;
	color: #FF6633;
	box-shadow: 1px 1px 3px #000000;
}

Chce zeby wygladalo to tak jak na ss, jak to zrobic bez tych warstw?

login.jpg

barcab.png


Pomogłem? daj Lubię to!

Odnośnik do komentarza
Udostępnij na innych stronach

  • 0

W sensie ze tak? (nie lapie tych bazgrolow :PP)

#logowanie {
	border: 1px solid black;
	border-radius: 10px;
	padding: 10px;
	width: 400px;
	height: 300px;
	margin-left: auto;
	margin-right: auto;
	
	left : 50%;
	position : absolute;
	top : 50%;
	transform : translate(-50%, -50%);
    text-align: center;
    
}
.srodek{
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

<div id="logowanie">
  <form action="login.php" method="POST">
    <div class="srodek">
      Panel Logowania
      <input type="text" name="login" placeholder="USERNAME" />
      <input type="password" name="password" placeholder="PASSWORD" />
      <input type="submit" value="ZALOGUJ" />
    </div>
  </form>
</div>

 

Lepiej jest nie odzywać się wcale i pozwolić ludziom myśleć, że jesteś glupi, niż odezwać się i rozwiać wszelkie wątpliwości.
Mark Twain

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający forum Wyśrodkowanie diva w poziomie i pionie   0 użytkowników
    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...