Question

我有这个：

但我的目标是得到这个：

我的代码是：

＆＃13;

.bonus-div {
  width: 290px;
  height: 29px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  text-align: center;
  background-color: #000;
}

.bonus-div>p {
  display: inline;
  height: 29px;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div>p:last-child {
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
}

＆＃13;

<div class="bonus-div">
  <p>+$4</i>Bonus</p>
  <p>= $24.00</p>
</div>

＆＃13;

那么，我如何才能将p置于此div内稍微靠近顶部，并使其位置与第二张图片相同？

Answer 1

你可以试试这个 -

.bonus-div {
  display : flex;
  align-items: center;
}

Answer 2

您可以使用flexbox方法：

.bonus-div {
  width: 290px;
  height: 29px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  background: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bonus-div>p {
  display: inline;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div>p:last-child {
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
}

<div class="bonus-div">
  <p>+$4 Bonus</p>
  <p>= $24.00</p>
</div>

或使用vertical-align：

.bonus-div {
  width: 290px;
  height: 29px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  background: blue;
  text-align: center;
}

.bonus-div p {
  vertical-align: middle;
}

.bonus-div>p {
  display: inline;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div>p:last-child {
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
}

<div class="bonus-div">
  <p>+$4 Bonus</p>
  <p>= $24.00</p>
</div>

Answer 3

这个问题有很多解决方案。我会给你最简单的实现。

<强> HTML

<div class='bonus-div'>
    <p>+$4.00 Bonus</p>
    <p> = </p>
    <p>$24.00</p>
</div>

<强> CSS

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

.bonus-div > p {
    color: white;
    font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:last-child{
    font-weight: 500;
    color: #2ABD77;
    font-size: 24px;
}

我的解决方案使用flexbox属性。如果您不介意不支持旧浏览器，请不要使用flexbox。

Answer 4

添加vertical-align：text-top;在css

<style type="text/css">
.bonus-div {
  width: 290px;
  margin: auto;
  padding-top: 5px;
  padding-bottom: 14px;
  text-align: center;
  background-color:#000;
}

.bonus-div > p {
  display: inline;
  color: white;
  font-family: 'Exo 2', sans-serif;
}

.bonus-div > p:first-child{
    color: #2ABD77;
    font-size: 18px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    vertical-align:text-top;
}
.bonus-div > p:last-child{
  font-weight: 500;
  color: #2ABD77;
  font-size: 24px;
  vertical-align:text-top;
}
</style>
<div class="bonus-div">
   <p>+$4</i>Bonus</p>
   <p>= $24.00</p>
</div>

Answer 5

无论您如何调整字体大小，都可以使用类似于表格的显示来确保自动完成每个垂直对齐。我使用div[id^="myid"][id$="region"] { ... }及其子属性display: table和display: table-row来执行此操作。我喜欢这些属性，因为它们现在很好地集成在大多数浏览器中（请查看css display:table caniuse兼容性表）。

JSFiddle：https://jsfiddle.net/4odfwse2/

<强> CSS

display: table-cell

<强> HTML

.bonus-div {
  width: 290px;
  height: 48px;
  margin: auto;
  text-align: center;
  background-color:#000;
}

.bonus-div-bonus, .bonus-div-total {
  font-family: 'Exo 2', sans-serif;
}

.bonus-div-bonus {
  color : #FFFFFF;
  text-align: right;
}

.bonus-div-total {
  color : #2ABD77;
  font-weight: 500;
  font-size: 24px;
  text-align : left;
}

.bonus-div-table {
  display : table;
  height : 100%;
  width : 100%;
}

.bonus-div-row {
  display : table-row;
}

.bonus-div-cell {
  display : table-cell;
  vertical-align : middle;
}

将div中的第一个p放在高于同一div内的另一个p的位置

5 个答案: