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

Html – div with content align out of order with respect to div without content

In the below code, the element with the content is out of order with respect to the other elements without content. This doesn’t occur when all the elements in the row has some content in them. Any idea why this is happening? (Thanks in advance for the help).

<style>
 button {
  background-color: #ffff;
  border: 1px solid #999;
  width: 120px;
  height: 120px;
  margin-top: -1px;
  margin-right: -1px;
  font-size: 50px;
  font-weight: bold;
}

</style>

<div>
   <div>
    <button> </button>
    <button> </button>
    <button> </button>
   </div>
   <div>
    <button> </button>
    <button> X </button>
    <button> </button>
   </div>
   <div>
    <button> </button>
    <button> </button>
    <button> </button>
   </div>
</div>
Tags:

2

Answers


  1. 0

    Here is the solution:

    .button-container {
  display: flex;
  align-items: center;
}

button {
  background-color: #ffff;
  border: 1px solid #999;
  width: 120px;
  height: 120px;
  margin-top: -1px;
  margin-right: -1px;
  font-size: 50px;
  font-weight: bold;
}
    <div class="container">
  <div class="button-container">
    <button></button>
    <button></button>
    <button></button>
  </div>
  <div class="button-container">
    <button></button>
    <button>X</button>
    <button></button>
  </div>
  <div class="button-container">
    <button></button>
    <button></button>
    <button></button>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    you should add property vertical-align: top; to button styles:

    button {
  background-color: #ffff;
  border: 1px solid #999;
  width: 120px;
  height: 120px;
  margin-top: -1px;
  margin-right: -1px;
  font-size: 50px;
  font-weight: bold;
  vertical-align: top;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search