Html Question posted in
Some basic documentation can be found here.

Html – I have three elements of the same height but they are not appearing at the same level AND the text inside is not centered vertically

I have three elements, two buttons and one bolded text element that I want to display at the same height. I also have text in a tag that I want centered. Here is what I see right now:

Wrong vertical align and text placement

How can I center this <b> tag and center the text inside of it?

Here is my HTML/React code:

        <div className="ContainerDiv">
          <button className="MinusButton"></button>
          <b className="Counter">100</b>
          <button className="PlusButton"></button>
        </div>

and my css:

.PlusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.Counter {
  display: inline-block;
  background-color: white;
  width: 200px;
  height: 100px;
  text-align: center;
  color: #282c34;
  display: inline-block;
}

.MinusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.ContainerDiv {
  display: inline-block;
  vertical-align: center;
  text-align: center;
}
Tags:

2

Answers


  1. 0

    My proposed solution is to use Flexbox to align the elements at the same level and center the text vertically.

    We can make a few adjustments to your CSS.

    For the div container: changed display to flex to use flexbox layout, for the counter changed display to flex. Added align-items: center and justify-content: center to center the text both vertically and horizontally. for the buttons removed display: inline-block as it’s not needed in a flex container.

    HTML

    <div className="ContainerDiv">
  <button className="MinusButton"></button>
  <b className="Counter">100</b>
  <button className="PlusButton"></button>
</div>

    CSS

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

.PlusButton,
.MinusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  border: none;
}

.Counter {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 200px;
  height: 100px;
  color: #282c34;
  font-size: 24px; 
  margin: 0 10px; 
}
    Login or Signup to reply.
  2. 0

    Add vertical-align: top; to all inline-blocks to align them equally. Otherwise the default vertical alignment of baseline (for inline-blocks) is applied, which can lead to confusion when there is text versus no text inside the different elements (i.e. in your instance the first line of text inside the middle block is aligned to the bottom of the empty inline-blocks at the right and left).

    body {
 background: black;
}
.PlusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

.Counter {
  display: inline-block;
  background-color: #fff;
  width: 200px;
  height: 100px;
  text-align: center;
  color: #282c34;
  display: inline-block;
  vertical-align: top;
}

.MinusButton {
  background-color: blue;
  width: 100px;
  height: 100px;
  display: inline-block;
  vertical-align: top;
}

.ContainerDiv {
  display: inline-block;
  vertical-align: center;
  text-align: center;
}
    <div class="ContainerDiv">
  <button class="MinusButton"></button>
  <b class="Counter">100</b>
  <button class="PlusButton"></button>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search