如何使一个按钮居中而不考虑另一个在 div 内内联显示的标签答案

【问题标题】：How to center one button irrespective of another a tag which is displayed inline inside a div如何使一个按钮居中而不考虑另一个在 div 内内联显示的标签
【发布时间】：2018-10-24 06:29:42
【问题描述】：

我有以下代码

.container {
  height: auto;
  width: 200px;
  background-color: gray;
  display: inline-block;
  text-align: center;
}

.tocart {
  width: 150px;
  display: inline-block;
}

.wishlist {
  display: inline-block;
  right: 36px;
  opacity: 0;
  visibility: visible;
  position: relative;
}

.container:hover .wishlist {
  right: 0;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <button class="tocart">
        Add to Cart
      </button>
  <a href="" class="wishlist"><i class="fa fa-heart"></i></a>
</div>

由于愿望清单图标，目前“添加到购物车”按钮向左移动。如何使我的“添加到购物车”按钮位于容器 div 的中心，并在将鼠标悬停在容器类上以容纳愿望列表图标时将其向左移动？

【问题讨论】：

标签： html css alignment

【解决方案1】：

您可以使用position-property 实现此目的。这是编辑后的 CSS：

.container {
  height: auto;
  width: 200px;
  background-color: gray;
  display: inline-block;
  text-align: center;
  position: relative;
}

.tocart {
  width: 150px;
  display: inline-block;
}

.wishlist {
  display: inline-block;
  right: 36px;
  opacity: 0;
  visibility: visible;
  position: absolute;
}

.container:hover .wishlist {
  right: 15px;
  visibility: visible;
  opacity: 1;
  transition: all 0.3s;
  top: 2px;
}

.container:hover .tocart {
  float: left;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container">
  <button class="tocart">
    Add to Cart
  </button>
  <a href="" class="wishlist"><i class="fa fa-heart"></i></a>
</div>

【讨论】：

【解决方案2】：

.wishlist{
  position:absolute; /* change from relative */
  transition: all 0.3s; /* add */
}


.container:hover .wishlist{
  position:relative; /* add */
  /* transition: all 0.3s; */ /* delete */
}

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在他们的帖子下方留下评论。 - From Review
@MuhammadSaqlain 它为他预先存在的代码提供了修复和补充，因此确实提供了答案。
尽管此代码可能（或可能不会）解决问题，但一个好的答案应该始终包含对代码的作用以及它如何解决问题的解释。