Çözüldü CSS buton nasıl ortalanır?

Endersqui · 23 Nisan 2024

Css ve HTML ile yaptığım sayfada 3 farklı buton var (evet, hayır ve tamam) bunları ortalamaya çalışırken "position: relative" kullanıp "left:550px" gibi uzaklıklar veriyorum fakat bu uzaklıklar pc de iyi görünüyor fakat telefonda çok kötü duruyor. Number input alanını ayrı evet hayır butonlarını ayrı olarak sayfanın tam ortasında yan yana durmasını istiyorum yardım eder misiniz?

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <!--butonlara js ile gereklilik eklenmeli-->
    <!--js ile değer hata mesajı eklenmeli-->
    <div class="anasayfa">
        <form action="veriler.js" method="post" id="anaform">
      
            <h2>Evinizde kaç kişi yaşıyor?</h2>

            <input class="number" type="number" placeholder="Sayı giriniz" min="1" max="10" required>
            <input class="submit" type="submit" value="Tamam">

            <hr>
          
            <h2>Evinizde haftada kaç kez duş alınıyor?</h2>

            <input class="number" type="number" placeholder="Sayı giriniz" min="1"  required>
            <input class="submit" type="submit" value="Tamam">

            <hr>
      
            <h2>Tıraş olurken su açık bırakılır mı?</h2>

            <input class="evet" type="submit" value="Evet" >
            <input class="hayir" type="submit" value="Hayır">

            <hr>
      
            <h2>Diş fırçalanırken su açık bırakılıyor mu?</h2>
      
            <input class="evet" type="submit" value="Evet">
            <input class="hayir" type="submit" value="Hayır">

            <hr>

            <h2>Evinizde günde kaç yumurta haşlanır?</h2>

            <input class="number" type="number" placeholder="Sayı giriniz" max="20" required>
            <input class="submit" type="submit" value="Tamam">

            <hr>

            <h2>Evinizde günde kaç kez sebze-meyve yıkanır?</h2>

            <input class="number" type="number" placeholder="Sayı giriniz" required>
            <input class="submit" type="submit" value="Tamam">

            <hr>
      
            <h2>Evinizde günde kaç kez sifon çekilir?</h2>

            <input class="number" type="number" placeholder="Sayı giriniz" max="30" required>
            <input class="submit" type="submit" value="Tamam">

            <hr>

        </form>
    </div>

</body>
</html>

CSS:

body{
    background-color:aliceblue;
}

hr{
    border-style: solid;
    border-width: 2px;
    border-color: black;
}

h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    text-align: center;
}

.submit{
    width: 80px;
    height: 50px;
    border-style: solid;
    border-width: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    background-color:yellow;
    border-radius: 50px;
    position: relative;
    left: 500px;
  
}

.number{
    width: 80px;
    height: 30px;
    border-style: solid;
    border-color: black;
    border-width: 3px;
    position: relative;
    left: 550px;
}

.evet{
    width: 80px;
    height: 50px;
    border-style: solid;
    border-width: 3px;
    border-radius: 50px;
    background-color: #4CAF50;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    left: 550px;
}

.hayir{
    width: 80px;
    height: 50px;
    border-style: solid;
    border-width: 3px;
    border-radius: 50px;
    background-color: #f44336;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    position: relative;
    left: 600px;
}

volggg · 23 Nisan 2024

Kolay gelsin. Siteler normalde direkt olarak tasarlanır daha sonrasında ise responsive(küçük cihazlara uygun) şekilde yapılır. Left: 500px yerine 25% kullanırsan sanırım sorunun çözülür.

volggg · 23 Nisan 2024

Kolay gelsin. Siteler normalde direkt olarak tasarlanır daha sonrasında ise responsive(küçük cihazlara uygun) şekilde yapılır. Left: 500px yerine 25% kullanırsan sanırım sorunun çözülür.

Endersqui · 23 Nisan 2024

volggg dedi:
Kolay gelsin. Siteler normalde direkt olarak tasarlanır daha sonrasında ise responsive(küçük cihazlara uygun) şekilde yapılır. Left: 500px yerine 25% kullanırsan sanırım sorunun çözülür.

Sorun çözüldü çoook teşekkür ederim

volggg · 23 Nisan 2024

Endersqui dedi:
Sorun çözüldü çoook teşekkür ederim

Rica ederim.

brkdnmz · 25 Nisan 2024

Flexbox ile bir alternatif çözüm sunayım. Araştırmanızı ve öğrenmenizi öneririm. Temizleştiriyor işleri. Sık sık kullanırım.

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <!--butonlara js ile gereklilik eklenmeli-->
    <!--js ile değer hata mesajı eklenmeli-->
    <div class="anasayfa">
        <form action="veriler.js" method="post" id="anaform">

            <h2>Evinizde kaç kişi yaşıyor?</h2>

            <div class="cevap">
                <input class="number" type="number" placeholder="Sayı giriniz" min="1" max="10" required>
                <input class="submit" type="submit" value="Tamam">
            </div>

            <hr>

            <h2>Evinizde haftada kaç kez duş alınıyor?</h2>

            <div class="cevap">
                <input class="number" type="number" placeholder="Sayı giriniz" min="1" required>
                <input class="submit" type="submit" value="Tamam">
            </div>

            <hr>

            <h2>Tıraş olurken su açık bırakılır mı?</h2>

            <div class="cevap">
                <input class="evet" type="submit" value="Evet">
                <input class="hayir" type="submit" value="Hayır">
            </div>

            <hr>

            <h2>Diş fırçalanırken su açık bırakılıyor mu?</h2>

            <div class="cevap">
                <input class="evet" type="submit" value="Evet">
                <input class="hayir" type="submit" value="Hayır">
            </div>

            <hr>

            <h2>Evinizde günde kaç yumurta haşlanır?</h2>

            <div class="cevap">
                <input class="number" type="number" placeholder="Sayı giriniz" max="20" required>
                <input class="submit" type="submit" value="Tamam">
            </div>

            <hr>

            <h2>Evinizde günde kaç kez sebze-meyve yıkanır?</h2>

            <div class="cevap">
                <input class="number" type="number" placeholder="Sayı giriniz" required>
                <input class="submit" type="submit" value="Tamam">
            </div>

            <hr>

            <h2>Evinizde günde kaç kez sifon çekilir?</h2>

            <div class="cevap">
                <input class="number" type="number" placeholder="Sayı giriniz" max="30" required>
                <input class="submit" type="submit" value="Tamam">
            </div>

            <hr>

        </form>
    </div>

</body>

</html>

CSS:

body {
  background-color: aliceblue;
}

hr {
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  text-align: center;
}

.cevap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Bunun kullanımını pek bilmiyorum ama bu hali çalışıyor. */
.cevap:has(.evet) {
  gap: 1rem;
}

.submit {
  width: 80px;
  height: 50px;
  border-style: solid;
  border-width: 3px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  background-color: yellow;
  border-radius: 50px;
  margin-left: -10px; /* Dilediğiniz ayarlamayı yapabilirsiniz. */
}

.number {
  width: 80px;
  height: 30px;
  border-style: solid;
  border-color: black;
  border-width: 3px;
}

.evet {
  width: 80px;
  height: 50px;
  border-style: solid;
  border-width: 3px;
  border-radius: 50px;
  background-color: #4caf50;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.hayir {
  width: 80px;
  height: 50px;
  border-style: solid;
  border-width: 3px;
  border-radius: 50px;
  background-color: #f44336;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
}

Çözüldü CSS buton nasıl ortalanır?

Ayrıntılı düzenleme

Endersqui

Centipat

volggg

volggg

Femtopat

Endersqui

Centipat

volggg

Femtopat

brkdnmz

Megapat

Benzer konular