如何使div中的按鈕居中-有解無憂

這是我的 CSS 和 HTML。

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
  float: left;
  /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

如何使div中的按鈕居中

我想將這些按鈕放在螢屏中心的文本下方！我嘗試了很多東西，對我沒有任何作用。

uj5u.com熱心網友回復：

您想使用flexon.btn-group并使用100%父級的寬度來拉伸 div。

.btn-group {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: skyblue;
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D;
  /* Green background */
  border: 1px solid green;
  /* Green border */
  color: white;
  /* White text */
  padding: 10px 24px;
  /* Some padding */
  cursor: pointer;
  /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none;
  /* Prevent double borders */
}


/* Clear floats (clearfix hack) */

.btn-group:after {
  content: "";
  clear: both;
  display: table;
}


/* Add a background color on hover */

.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>
</div>

uj5u.com熱心網友回復：

您可以添加到您的CSS：

.btn-group{
  display:flex;
  justify-content:center;
}

它看起來像這樣

如何使div中的按鈕居中

uj5u.com熱心網友回復：

你可以使用彈性盒子

.btn-group {
  display:flex; 
  flex-direction: row; 
  justify-content:center; 
}
.btn-group button {

  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

  <div class="btn-group">
    <button type="button" class="button1">Faucet</button>
    <button type="button" class="button2">About Nano/Faucet</button>
    <button type="button" class="button3">Donate</button>  
</div>

uj5u.com熱心網友回復：

就像添加這個規則來設定容器樣式一樣簡單display:flex

.btn-group{
  display: flex; 
  justify-content: center;  
}

這是整個片段：

.btn-group{
  display: flex; 
  justify-content: center;  
}

.btn-group button {
  border: 3px solid green;
  padding: 10px;
  background-color: #04AA6D; /* Green background */
  border: 1px solid green; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}

<div class="btn-group">
  <button type="button" class="button1">Faucet</button>
  <button type="button" class="button2">About Nano/Faucet</button>
  <button type="button" class="button3">Donate</button>  
</div>

uj5u.com熱心網友回復：

添加.btn-group{display: table; margin: 0 auto;}

    .btn-group{display: table; margin: 0 auto;}

    .btn-group button {
      border: 3px solid green;
      padding: 10px;
      background-color: #04AA6D;
      /* Green background */
      border: 1px solid green;
      /* Green border */
      color: white;
      /* White text */
      padding: 10px 24px;
      /* Some padding */
      cursor: pointer;
      /* Pointer/hand icon */
      float: left;
      /* Float the buttons side by side */
    }

    .btn-group button:not(:last-child) {
      border-right: none;
      /* Prevent double borders */
    }


    /* Clear floats (clearfix hack) */

    .btn-group:after {
      content: "";
      clear: both;
      display: table;
    }


    /* Add a background color on hover */

    .btn-group button:hover {
      background-color: #3e8e41;
    }

    <div class="btn-group">
      <button type="button" class="button1">Faucet</button>
      <button type="button" class="button2">About Nano/Faucet</button>
      <button type="button" class="button3">Donate</button>
    </div>

uj5u.com熱心網友回復：

請將這些 CSS 添加到您的代碼中 Display be flex 然后使用 Justify 內容中心獲取輸出

.btn-group {
position: relative;
display: flex;
vertical-align: middle;
justify-content: center;
}

uj5u.com熱心網友回復：

使用彈性。

 .btn-group {
            display: flex;
            justify-content: center;
        }
        
        .btn-group button {
            
            border: 3px solid green;
            padding: 10px;
            background-color: #04AA6D; /* Green background */
            border: 1px solid green; /* Green border */
            color: white; /* White text */
            padding: 10px 24px; /* Some padding */
            cursor: pointer; /* Pointer/hand icon */
            float: left; /* Float the buttons side by side */
        }
        
        .btn-group button:not(:last-child) {
            border-right: none; /* Prevent double borders */
        }
        
        /* Clear floats (clearfix hack) */
        .btn-group:after {
            content: "";
            clear: both;
            display: table;
        }
        
        /* Add a background color on hover */
        .btn-group button:hover {
            background-color: #3e8e41;
        }

        <div class="btn-group">
          <button type="button" class="button1">Faucet</button>
          <button type="button" class="button2">About Nano/Faucet</button>
          <button type="button" class="button3">Donate</button>  
        </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/492265.html

標籤：javascript html css

上一篇：在PySpark中使用countByKey()后如何對RDD進行排序

下一篇：陣列concat正在覆寫for..each回圈中的值