CSS Buton Oluşturma ve Yerleştirme Sorunu

Garwyy

iki buton oluşturup sayfada ortalanmalarını istiyorum ama olmuyor.

<div class="center"><div><p style="text-align: center;"><b></b></p><p style="text-align: center;"><b></b></p>
  </div>  
  <div class="download-btn btn1" id="dosyacobuttonln" onclick="location.href ='#';">
    <div class="top" style="text-align: center;">
      <i class="fa fa-cloud-download"></i> X
    </div>
    <div class="bottom" style="text-align: center;">
      Boyut: 1MB
    </div>
  </div>
  <div>
    <p style="text-align: center;"><b></b></p>
  </div>  
  <div class="download-btn btn2" id="gdbuttonln2" onclick="location.href = '#';">
    <div class="top" style="text-align: center;">
      <i class="fa fa-cloud-download"></i> Y
    </div>
    <div class="bottom" style="text-align: center;">
      Boyut: 1MB
    </div>
  </div>
</div>
<style>
  
.download-btn {
  width:50%;
  height:60px;
  text-align:center;
  cursor:pointer;
  border-radius:10px;
  box-sizing:border-box;
  overflow:hidden;
  float: left;
}
.download-btn.btn1 {
  border:4px solid #3afdac;
  margin: 0 auto;
  display: inline-block;
  padding: 0 5px;
}
.download-btn.btn2 {
  border:4px solid #3afdac;
  margin: 0 auto;
  display: inline-block;
  padding: 0 5px;
}
.download-btn div {
  width:100%;
  height:100%;
  font-size:15px;
  font-weight:600;
  text-transform:uppercase;
  line-height:50px;
}
.download-btn.btn1 .top {
  background:#5f4b8b;
}
.download-btn.btn2 .top {
  background:#5f4b8b;
}

.download-btn .bottom {
  background:#eee;
  color:#222;
}
.download-btn .top {
  transition:all 300ms ease-in-out;
}
.download-btn:hover .top {
  margin-top:-50px;
}
</style>  
<script type="text/javascript">
    document.getElementById("dosyacobuttonln").onclick = function () {
        location.href = "#";
    };
</script>
<script type="text/javascript">
    document.getElementById("gdbuttonln2").onclick = function () {
        location.href = "#";
    };
</script>
<br>

Bunlar birbirlerine yapışıyorlar ve genişlikleri çok büyük. Genişliklerini küçülttüğümde sola yaslanıyorlar. Nasıl bu butonları hem ortalayıp hem de araların yaklaşık 5 piksel büyüklüğünde bir boşluk açabilirim? Teşekkürler.

Halil Han BADEM

Garwyy Merhaba,
aralarındaki boşluk için margin değeri ile oynayabilirsin. 2 butonu ortalamak için ise;

http://jsfiddle.net/mgtoz4d3/

Şunu deneyebilirsin.

Kereem

Birbirine yapışmamaları için
.download-btn.btn1 { border:4px solid #3afdac; margin: 0 auto; display: inline-block; padding: 0 5px; } .download-btn.btn2 { border:4px solid #3afdac; margin: 0 auto; display: inline-block; padding: 0 5px; }

Aralarında 5px boşluk bırakmak için soldaki butonun sağına, sağdaki butonun soluna boşluk bırakıyoruz
( Eşit olması için 2.5px kullandım istersen 4 1 veya 3 2 şeklinde de boşluk verebilirsin )

.download-btn.btn1 { border:4px solid #3afdac; margin-right: 2.5px; display: inline-block; padding: 0 5px; } .download-btn.btn2 { border:4px solid #3afdac; margin-left: 2.5px; margin-right: 2.5px; display: inline-block; padding: 0 5px; }

Dış boşluk bıraktık ama butonlarımız çok büyük olduğu için alt satıra geçecektir butonu küçültmek için
butonların widht değerini %50 den düşük bir değer vericekiz. ( Ben 30% kullandım istersen %50 den düşük başka bir değer de kullanabilirsin )

    `
    .download-btn {
    width:30%;
    height:60px;
    text-align:center;
    cursor:pointer;
    border-radius:10px;
    box-sizing:border-box;
    overflow:hidden;
    float: left;
    }
    `

Ortalamak için aslında yapmamız gereken sayfanın genişliğinin yarısından bizim kutularımızın genişliğinin yarısını çıkarmak ve bu değeri margin olarak vermek yani sayfanın yatay olarak ortasındaki noktanın bizim kutularımızın yatay olarak ortasındaki noktayla üst üste gelmesini sağlayacağız. buda bize yatay olarak ortalanmasını sağlayacak.

Bunun için soldaki butonumuza soluna margin değeri vereceğiz vereceğimiz margin değeriniz sayfanın genişliğinin yarısından yani %50 ve bütün butonlarımızın uzunluğunun yarısı yani 381.59px (30% değer verince bu oluyor veya sağ tık inceleden butonların uzunluğuna bakabilirsin. ) değerlerini çıkarıp onu margin olarak vereceğiz onu da calc() kullanarak yapacağız
.download-btn.btn1 { border:4px solid #3afdac; margin-left: 2.5px; margin-left: calc( 50% - 381.59px); margin-right: 2.5px; display: inline-block; padding: 0 5px; }
bu şekilde ortalayabiliriz sormak istediğin biryer olursa forumun discord sunucusuna gelip sunucuya yazabilirsin.
umarım açıklayabilmişimdir.
kolay gelsin