1

I have a parent div in which there are three child div, all the child divs are display:inline-block, so that all the three child div comes in single line.

Now the problem is, I want first and last div to float:right & float:left, receptively and the center div should be center aligned. I am trying to do this but not able to achieve.

The first div is already at the left corner so not issues. The last div is float:right, which also works fine.

The center div is not working as expected text-align:center

Can someone please help me with this?

#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>
Rehan
  • 3,813
  • 7
  • 37
  • 58

2 Answers2

1

I added text-align:center to the parent, and added float:left & right to the first and last child;

This cannot properly center it, due to unequal width of the first and last child,

So I added position:absolute to center the second element and by making the parent relative position,

This method will ensure, that the second element will always be at the center, irrespective of the length of first and last child.

But it can get overlapped on small screens

#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;
}
<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>
<br/>

<div id="stat-board" class="type2" 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>
Gautam Naik
  • 8,990
  • 3
  • 27
  • 42
0

How about...

  • add relative positioning to the container div
  • absolutely position the middle 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>
LexJacobs
  • 2,483
  • 15
  • 21