Çözüldü CSS'de sumbit butonu nasıl ortalanır?

Aloe Vera · 22 Ocak 2023

HTML, CSS kullanarak yapmaya çalıştığım login panelinde "submit" butonunu bilgi kutucuklarına göre nasıl ortalayabilirim?
index.html:

Kod:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" >

 </form>
 <form class= "sifre" action="get">

 <input type="text" placeholder="password" >

 </form>
 <form class="gonder" action="get">

 <input type="submit" value="submit">

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

Main. CSS:

Kod:

input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Çıktı:

dgknbzglu · 22 Ocak 2023

Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
   <br>
 <input type="text" placeholder="password" name="sifre">
   <br>
 <input type="submit" value="submit" name="gonder">
  
 </form>
</body>
</html>

CSS:

.eposta {
  text-align:center;
  float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:

dgknbzglu · 22 Ocak 2023

Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
   <br>
 <input type="text" placeholder="password" name="sifre">
   <br>
 <input type="submit" value="submit" name="gonder">
  
 </form>
</body>
</html>

CSS:

.eposta {
  text-align:center;
  float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:

Aloe Vera · 22 Ocak 2023

dgknbzglu dedi:

Birden fazla form açarak bu işlem çok sağlıklı olmaz. Örneğini ve görselini aşağıya bırakıyorum:

HTML:

<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Dionysus login panel</title>
 <link rel="stylesheet" type="text/css" href="main.css">

</head>
<body>

 <form class= "eposta" action="get">

 <input type="text" placeholder="e posta or username" name="eposta">
 <br>
 <input type="text" placeholder="password" name="sifre">
 <br>
 <input type="submit" value="submit" name="gonder">

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

CSS:

.eposta {
 text-align:center;
 float:left;
}
input {

 padding:8px 20px;
 border: 1px solid #eee;
 border-left: 3px solid;
 border-left-color:rgb(63, 63, 63);
 border-radius: 5px;
 transition: border-color .8s ease-out;
 }

 input:focus{

 outline:none;
 border: 1px solid #eee;
 border-left: 3px solid #888;

 }

Görseli:
Eki Görüntüle 1641457

Anladım hocam çok teşekkür ederim. <br>leri alt satırda yazması için kullandınız değil mi?

dgknbzglu · 23 Ocak 2023

Aloe Vera dedi:
Anladım hocam çok teşekkür ederim. <br>leri alt satırda yazması için kullandınız değil mi?

Evet öyle.

Çözüldü CSS'de sumbit butonu nasıl ortalanır?

Ayrıntılı düzenleme

Aloe Vera

Hectopat

dgknbzglu

dgknbzglu

Megapat

Aloe Vera

Hectopat

dgknbzglu

Megapat

Benzer konular