Question

我想知道是否有人可以帮助我完成我想要完成的事情。我试图将此<button>作为中心。

这是我的codepen。

下面是我的HTML / CSS编码。

 <button class="button" href="#">Contact Us</button>

.button {
  display:inline-block;
  border-radius:4px;
  background-color:#f4511e;
  border:none;
  color:#FFFFFF;
  text-align:center;
  font-size:18px;
  padding:10px;
  width:125px;
  transition:all 0.5s;
  cursor:pointer;
}

此外，我的箭在哪里消失了？页面上的箭头不是我想要的那个。这是我输入到我的codepen中的编码，但箭头没有显示。当前在我的codepen上显示的箭头是否会阻止它？ javascript编码是否仍适用于新箭头？

下面是我想要显示的箭头的HTML / CSS编码。（如果箭头的颜色是问题我尝试改变它仍然无法看到。）

<div id="arrow"></div>    
#arrow {
    height: 50px;
    width: 112px;
  color: white;
    border-top: none;
    border-left: none;
    margin: 100px;
    font-size: 74pt;
    transform: rotateX(63deg) rotate(90deg);
}`

亲切的问候，

小连

Answer 1

我假设您想要居中button，所以如果您更新其规则，它将

.button {
  display:block;                 /*  changed  */
  margin: 0 auto;                /*  added    */
  border-radius:4px;
  background-color:#f4511e;
  border:none;
  color:#FFFFFF;
  font-size:18px;
  padding:10px;
  width:125px;
  transition:all 0.5s;
  cursor:pointer;
}

你的箭头会显示你是否给它一个边框，比如

#arrow {
    height: 50px;
    width: 112px;
    color: white;
    border: 2px solid red;      /*  added     */
    border-top: none;
    border-left: none;
    margin: 100px;
    font-size: 74pt;
    transform: rotate(63deg);   /*  changed   */
}

Updated codepen

Answer 2

我正试图将此<div>
作为中心

要将div置于中心，您需要将其设置为左，将设置为 margin至auto

margin-right: auto;
margin-left: auto;

我的箭走了哪里？

这不是箭头。它是方形的。尝试更改它background-color，它将会显示。

Answer 3

您是否试图将按钮居中？如果是这样，您可以通过在.button CSS配置中添加以下内容来实现：

.button {
    position: relative;
    top: 50%; 
    left: 50%;
}

对于箭头，如果您需要自定义光标，最简单的方法是生成图像并将其添加到CSS：

div {
    cursor: url(YOUR_IMAGE_URL), auto;
}

如何将<按钮>置于中心并进行编码问题

3 个答案: