Skocz do zawartości

  • 👋 Witaj na MPCForum!

    Przeglądasz forum jako gość, co oznacza, że wiele świetnych funkcji jest jeszcze przed Tobą! 😎

    • ✅ Pełny dostęp do działów i ukrytych treści
    • ✅ Możliwość pisania i odpowiadania w tematach
    • ✅ System prywatnych wiadomości
    • ✅ Zbieranie reputacji i rozwijanie swojego profilu
    • ✅ Członkostwo w jednej z największych społeczności graczy

    👉 Dołączenie zajmie Ci mniej niż minutę – a zyskasz znacznie więcej!

    Zarejestruj się teraz
  • 0

Wyśrodkowanie diva w poziomie i pionie

Redbulek

Pytanie zadane przez Redbulek ,

Pytanie

Redbulek Budowniczy

Redbulek

Opublikowano
Budowniczy

Redbulek

Opublikowano

Ten zewnętrzny element [wiekszy] chce wysrodkowac w pionie na stronie aby cały był na środku strony, ten mały tak samo tylko jeszcze wyśrodkować go w tym pojemniku co już jest.

srodek.jpg

barcab.png


Pomogłem? daj Lubię to!

10 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

Redbulek Budowniczy

Redbulek

Opublikowano
Budowniczy

Redbulek

  • Autor
Opublikowano 
<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!

maxaz Specjalista

maxaz

Opublikowano
Specjalista

maxaz

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

Jakub Specjalista

Jakub

Opublikowano
Specjalista

Jakub

Opublikowano

Przecież może użyć samego grida, nie potrzebny mu do tego cały bs.

Ale faktem jest, że jeśli się uczy (a na to wygląda) bez sensu jest korzystanie z czegokolwiek co ma na celu przyśpieszenie pracy. Fajnie jakby zrozumiał jak działa flexbox, bo bs mu tego nie wyjaśni.

slepiec68 Rekrut

slepiec68

Opublikowano
Rekrut

slepiec68

Opublikowano

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

Redbulek Budowniczy

Redbulek

Opublikowano
Budowniczy

Redbulek

  • Autor
Opublikowano 
<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!

slepiec68 Rekrut

slepiec68

Opublikowano
Rekrut

slepiec68

Opublikowano

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

Zarchiwizowany

Ten temat przebywa obecnie w archiwum. Dodawanie nowych odpowiedzi zostało zablokowane.

Pytania
×
×
  • Dodaj nową pozycję...