css 如何使按钮居中？

gijlo24d 于 2022-12-15 发布在其他

关注(0)|答案(3)|浏览(269)

我试图使添加按钮上的middle的方块不仅是在center，但在middle的。

.gallery {
  background-color: #fbfbfb;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid #bbbbbb;
  height: 85px;
  line-height: 1;
  box-sizing: border-box;
  margin: 12px;
  height: auto;
}

input[type="file"] {
  display: none;
}

.images-upload {
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px dashed #ccc;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  width: 165px;
  height: 85px;
}

.images-preview {
  border-radius: 5px;
  border: 1px solid #ccc;
  display: inline-block;
  width: 165px;
  height: 85px;
  padding-top: -14px;
}

.button-container {
  height: 90px;
  display: inline-block;
}

.image-container {
  height: 90px;
  width: 15%;
  display: inline-block;
}

.custom-icon {
  color: #00afca;
}

.close-btn {
  background: none;
  color: white;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  position: relative;
  left: -160px;
  top: -15px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  width: 0px;
}

.close-btn:hover {
  color: red;
  box-shadow: red 0px 7px 29px 0px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./assets/css/style.css" class="href">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div class="container">
    <div class="gallery w-100 m-2">
      <div class="p-3">
        <div class="button-container my-1">
          <div for="images-upload" class="images-upload">
            <i class=" fas fa-plus-circle fa-3x custom-icon"></i>
          </div>
          
          <input id="images-upload" type="file" name="images" multiple="multiple">
        </div>

        <div class="image-container d-inline my-1">
          <img src="https://via.placeholder.com/200x150" alt="" class="images-preview">
          <button class="close-btn"> <i class="fas  fa-2x fa-times"></i></button>
        </div>
      </div>
    </div>
  </div>
</body>

css

来源：https://stackoverflow.com/questions/70010294/how-to-center-a-button

3条答案

按热度按时间

yizd12fk1#

把这个按钮放到一个div中，并像这样设置这个div的样式：

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

<div class="divClass">
  <button>add</button>
</div>

按钮应在div中居中

赞(0）回复(0）举报 2022-12-15

de90aj5v2#

使按钮居中的最简单方法是这样做。

#button {
  align-items: center;
  text-align: center;
}

<div id="button" align="center">
<button>
  Button
</button>
</div>

赞(0）回复(0）举报 2022-12-15

ubbxdtey3#

需要将父对象设置为绝对位置，然后将子对象设置为相对位置，并将按钮放置在距离边缘50%的位置，这将使左上角移动到中心，因此您将其向后移动，并变换子对象宽度和高度的50%。
我希望这是有道理的

.gallery {
  background-color: #fbfbfb;
  border-radius: 5px;
  border-style: solid;
  border: 1px solid #bbbbbb;
  height: 120px;
  line-height: 1;
  box-sizing: border-box;
  margin: 12px;
}

input[type="file"] {
  display: none;
}

.images-upload {
  background-color: #ffffff;
  border-radius: 5px;
  border: 1px dashed #ccc;
  display: inline-block;
  padding: 3px;
  cursor: pointer;
  width: 165px;
  height: 85px;
}

.images-preview {
  border-radius: 5px;
  border: 1px solid #ccc;
  display: inline-block;
  width: 165px;
  height: 85px;
  padding-top: -14px;
  margin-top: -5px;
}

.button-container {
  height: 90px;
  display: inline-block;
 position: relative;
    float: left;

}

.image-container {
  height: 90px;
  width: 15%;
  display: inline-block;
    position: relative;
    float: left;
    padding: 5px;
}

.custom-icon {
 color: #00afca;
 position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.close-btn {
  background: none;
  color: white;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  position: relative;
  left: 10px;
  top: -80px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  width: 0px;
}

.close-btn:hover {
  color: red;
  box-shadow: red 0px 7px 29px 0px;
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./assets/css/style.css" class="href">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />
</head>

<body>
  <div class="container">
    <div class="gallery w-100 m-2">
      <div class="p-3">
        <div class="button-container my-1">
          <div for="images-upload" class="images-upload">
            <i class=" fas fa-plus-circle fa-3x custom-icon"></i>
          </div>
          
          <input id="images-upload" type="file" name="images" multiple="multiple">
        </div>

        <div class="image-container d-inline my-1">
          <img src="https://via.placeholder.com/200x150" alt="" class="images-preview">
          <button class="close-btn"> <i class="fas  fa-2x fa-times"></i></button>
        </div>
      </div>
    </div>
  </div>
</body>

赞(0）回复(0）举报 2022-12-15

我来回答

css 如何使按钮居中？

3条答案

相关问题

热门标签

最新问答