Question

我试图将标题文本和关闭图标放在同一行上，但它们不在同一行上对齐。我的意思是在同一个div中说。以下是我的代码段。你能让我知道我犯了什么错误吗？我得到这样的东西。见下图。

<div id="container-adv">
    <div id="something-else">
        <h4>Advanced Run</h4>
        <div class="text-center">
            <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Open</a>
        </div>
    </div>
    <div id="overflow"></div>
</div>

#container-adv {
  width: auto;
  height: auto; /* This can be any height and everything fills in */
  padding: 55px 0 0 -1px;            
}
#something-else {
  height: auto;
  width: auto;
  background-color: #2196f3;
  margin: -55px -24px 15px -24px;
  padding: 15px 0 1px 22px;
  color: #ffffff;
}

所以我的想法是使文本和关闭图标都对齐在同一行上。有人可以建议我吗？

Answer 1

您应该使用position: absolute，这是最简单的方法。

#container-adv {
  width: auto;
  height: auto;
}



#something-else{
  position: relative;
  height: auto;
  width: auto;
  background-color: #2196f3;
  padding: 10px;
  color: #ffffff;
}

#something-else h4 {
  margin: 0;
}

#something-else .btn {
 position: absolute;
 right: 10px;
 top: 10px;
}

<div id="container-adv">
  <div id="something-else">
    <h4>Advanced Run</h4>
    <div class="text-center">
      <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription">Open</a>
    </div>
  </div>
  <div id="overflow">
  </div>
</div>

Answer 2

不需要绝对位置。如果您的2个元素（title和icon）位于同一容器中，则可以在该容器上使用display:flex; justify-content:space-between; align-items:center。

justify-content指定项目应水平对齐的方式，space-between表示1将位于最左边，1位于最右边（就像您想要的一样）

align-items指定了项目应垂直对齐的方式，我想您需要将它们在容器内居中放置。它们不会居中显示，因为#something-else的padding-top和padding-bottom不相等。

注意：我删除了margin的{{1}}样式，因为它使div位置变得奇怪。不确定为什么要使用负边距。

参见下文：

#something-else

#container-adv {
  width: auto;
  height: auto; /* This can be any height and everything fills in */
  padding: 55px 0 0 -1px;            
}
#something-else {
  height: auto;
  width: auto;
  background-color: #2196f3;
 
  padding: 15px 0 1px 22px;
  color: #ffffff;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

Answer 3

#container-adv {
  width: auto;
  height: auto;
}

#something-else{
  position: relative;
  height: auto;
  width: auto;
  background-color: #2196f3;
  padding: 10px;
  color: #ffffff;
}

#something-else h4 {
  margin: 0;
}

.your-new-class {
  display: grid;
  grid-template-columns: auto 50px;
  align-self: center;
}

.your-new-class h4 {
  grid-column: 1 / 2;
}

.your-new-class a {
  grid-column: 2 / 3;
  text-align: center;
  color: #fff;
}

.your-new-class h4,
.your-new-class a {
  align-self: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="container-adv">
  <div id="something-else">
    <div class="your-new-class">
      <h4>Advanced Run</h4>
      <a href="" class="btn btn-default btn-rounded" data-toggle="modal" data-target="#orangeModalSubscription"><i class="fa fa-times" aria-hidden="true"></i></a>
    </div>
  </div>
  <div id="overflow">
  </div>
</div>

我是说这是您要实现的目标吗？

您可以在此处使用CSS Grid。当然，支持并不是目前最好的方法，但继续前进可能是在您的代码中开始使用它的好主意。这完全取决于您愿意支持多远。

我将<h4>和<a>放在了同一div中。将.your-new-class设置为display: grid和grid-template-columns: auto 25px;。这会将您的网格分为两个区域。第一个区域是自动宽度，第二个区域固定为25px。

该div的子级（<h4>和<a>）的设置为grid-column: 1 / 2;和grid-column: 2 / 3;。这是他们的跨度宽度。自动区域从点1（网格的起点，从左到右）到点2。<a>从点2到点3（网格的终点）。

两个孩子都使用align-self: center;将内容垂直居中。

网格为您提供了极大的布局灵活性，并与Flexbox完美配合。

检查Can I Use以获得完整的支持详细信息

还有Grid by Example。极好的资源和起点。我在开发中仍在处理它，但它可能是您的选择。

这可能不是完美的解决方案，也不是完全优化的方法，我仅对您的代码进行了少许修改，但这表明您有很多方法可以给猫做皮毛。

*我添加了一个Font Awesome CDN以显示'x'。您可以选择其他方法。

CSS并排对齐问题

3 个答案: