文本对齐中心不适用于内联块

时间：2018-08-18 19:19:46

标签： html css

我有一个父div，其中有三个子div，所有子div均为display:inline-block，因此所有三个子div都位于一行中。

现在的问题是，我希望第一个和最后一个div可以接受地分别浮动：right和float：left，并且中心div应该居中对齐。我正在尝试执行此操作，但无法实现。

第一个div已经在左上角，所以没有问题。 最后一个div是float：right，它也可以正常工作。

中心div无法正常工作text-align:center

有人可以帮我吗？

#wave {
  color: white;
  font-size: 24px;
  /* text-align:left; */
  line-height: 65px;
  display: inline-block;
  /* float:left; */
  padding-left: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-right: 22px;
  text-align: center;
  /* border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#score-card {
  color: white;
  font-size: 26px;
  /* text-align:right; */
  line-height: 65px;
  display: inline-block;
  float: right;
  padding-right: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-left: 22px;
  /* border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#life {
  display: inline-block;
  line-height: 65px;
  color: white;
  font-size: 26px;
}
<div id="stat-board" style="height:65px;background-color:black;">

  <div id="wave">
    Wave <span id="custom-wave-number"></span>
  </div>

  <div id="life">
    Life <span id="custom-life-number"></span>
  </div>

  <div id="score-card">
    <span id="score">0</span>
  </div>


</div>

2 个答案:

答案 0 :(得分：1)

我向父级添加了text-align：center，并向第一个和最后一个子级添加了float：left和right;

由于第一个和最后一个孩子的宽度不相等，因此无法正确居中

因此，我添加了( "inventory": [ { "location": "in place one", # I want to update this "name": "opel", "tags": [ "x1", "f3" ] }, { "location": "in place two", "name": "abc", "tags": [ "a3", "f5" ] }], "User" :"test" } 以使第二个元素居中并通过设置父级相对位置来

此方法将确保第二个元素始终位于中心，而与第一个和最后一个孩子的长度无关。

但是它可能会在小屏幕上重叠

position:absolute
#wave {
  color: white;
  font-size: 24px;
  /* text-align:left; */
  line-height: 65px;
  /*display: inline-block;*/
  float:left; 
  padding-left: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-right: 22px;
  text-align: center;
  /* border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#score-card {
  color: white;
  font-size: 26px;
  /* text-align:right; */
  line-height: 65px;
  /*display: inline-block;*/
  float: right;
  padding-right: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-left: 22px;
  /* border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#life {
  display: inline-block;
  line-height: 65px;
  color: white;
  font-size: 26px;
}
#stat-board{text-align:center}




.type2{position:relative;}

.type2 #life{
  position:absolute;
  left:0;
  width:100%;
  text-align:center;
}

答案 1 :(得分：0)

怎么样...

  • 将相对位置添加到容器div
  • 绝对定位中间div 

#stat-board {
  width: 100%;
  position: relative;
}

#wave {
  color: white;
  font-size: 24px;
  /* text-align:left; */
  line-height: 65px;
  display: inline-block;
  /* float:left; */
  padding-left: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-right: 22px;
  text-align: center;
  /* border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#score-card {
  color: white;
  font-size: 26px;
  /* text-align:right; */
  line-height: 65px;
  display: inline-block;
  float: right;
  padding-right: 10px;
  font-family: Exo-Regular;
  font-weight: bolder;
  letter-spacing: 1.5px;
  padding-left: 22px;
  /* border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  -webkit-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 2px 78px -8px rgba(0,0,0,0.75); */
}

#life {
  position: absolute;
  display: inline-block;
  line-height: 65px;
  color: white;
  font-size: 26px;
  left: 50%;
  right: 50%;
}
<div id="stat-board" style="height:65px;background-color:black;">

  <div id="wave">
    Wave <span id="custom-wave-number"></span>
  </div>

  <div id="life">
    Life <span id="custom-life-number"></span>
  </div>

  <div id="score-card">
    <span id="score">0</span>
  </div>


</div>

相关问题
最新问题