Ensuring proper alignment within anchor links and buttons

Question

Ensuring proper alignment within anchor links and buttons

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}

button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

We are currently facing an issue in our project regarding the alignment of buttons with icons that render as either a button or an anchor based on props. The misalignment of button content has become a challenge for us, as demonstrated in the code snippet provided.

Why is the inner div aligning differently in a button compared to an anchor? How can I correctly align the contents of the button vertically without simply adding padding-top?

javascript html css button alignment

Answer 1

Answer №1

It appears that the reason for the unexpected behavior is due to invalid HTML coding according to HTML5 standards. Placing a div inside a button is not considered valid, leading to inconsistent rendering across different browsers.

To achieve the desired outcome, you can utilize workarounds such as adjusting padding or positioning. However, please note that these solutions may not align with valid HTML practices. One possible workaround involves resetting paddings and vertically centering content within an anchor tag without relying on its height. You can find an example of this workaround here: https://jsfiddle.net/ne037nL7/

According to HTML5 guidelines, buttons should only contain phrasing content, which includes text, span, i, and more. For a full list of acceptable phrasing content, refer to: https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content

For additional information, you can consult the W3 source document regarding the button element: https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

Answer 2

It appears that the reason for the unexpected behavior is due to invalid HTML coding according to HTML5 standards. Placing a div inside a button is not considered valid, leading to inconsistent rendering across different browsers.

To achieve the desired outcome, you can utilize workarounds such as adjusting padding or positioning. However, please note that these solutions may not align with valid HTML practices. One possible workaround involves resetting paddings and vertically centering content within an anchor tag without relying on its height. You can find an example of this workaround here: https://jsfiddle.net/ne037nL7/

According to HTML5 guidelines, buttons should only contain phrasing content, which includes text, span, i, and more. For a full list of acceptable phrasing content, refer to: https://www.w3.org/TR/2012/WD-html5-20120329/content-models.html#phrasing-content

For additional information, you can consult the W3 source document regarding the button element: https://www.w3.org/TR/2012/WD-html5-20120329/the-button-element.html#the-button-element

Answer 3

Answer №2

Give this code a shot.

  <style>
            .main{
        display:table;
        }
            button, a {
              height: 30px;
              display: table-cell;
              border: 1px solid black;
              vertical-align: middle;
              padding:0 10px;
            }
            button {
              background: transparent;
              height: 32px;
              margin-right: 10px;
            }

            button > div, a > div {
              width: 30px;
              height: 10px;
              background-color: red;
            }
            </style>
          <div class="main">
            <button>
              <div class="buttonDiv"></div>
            </button>

            <a href="#">
              <div class="anchorDiv"></div>
            </a>
        </div>

Answer 4

Give this code a shot.

  <style>
            .main{
        display:table;
        }
            button, a {
              height: 30px;
              display: table-cell;
              border: 1px solid black;
              vertical-align: middle;
              padding:0 10px;
            }
            button {
              background: transparent;
              height: 32px;
              margin-right: 10px;
            }

            button > div, a > div {
              width: 30px;
              height: 10px;
              background-color: red;
            }
            </style>
          <div class="main">
            <button>
              <div class="buttonDiv"></div>
            </button>

            <a href="#">
              <div class="anchorDiv"></div>
            </a>
        </div>

Answer 5

Answer №3

Give this a try

a{
display:table-cell ;
}

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}
a{
display:table-cell ;
padding:0.5px 6px;
}
button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

Answer 6

Give this a try

a{
display:table-cell ;
}

button, a {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}
a{
display:table-cell ;
padding:0.5px 6px;
}
button > div, a > div {
  width: 30px;
  height: 10px;
  background-color: red;
}

<button>
  <div class="buttonDiv"></div>
</button>

<a href="#">
  <div class="anchorDiv"></div>
</a>

Answer 7

Answer №4

.btn {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
  float:left;
}

.link {
  height: 30px;
  border: 1px solid black;
  vertical-align: middle;
  display: table-cell;
}

.btn > div {
  width: 30px;
  height: 10px;
  background-color: red;
}


.link > div {
  width: 30px;
  height: 10px;
  background-color: red;
  vertical-align:middle;
}

<button class="btn">
  <div class="buttonDiv"></div>
</button>

<a href="#" class="link">
  <div class="anchorDiv"></div>
</a>

Answer 8

.btn {
  height: 30px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
  float:left;
}

.link {
  height: 30px;
  border: 1px solid black;
  vertical-align: middle;
  display: table-cell;
}

.btn > div {
  width: 30px;
  height: 10px;
  background-color: red;
}


.link > div {
  width: 30px;
  height: 10px;
  background-color: red;
  vertical-align:middle;
}

<button class="btn">
  <div class="buttonDiv"></div>
</button>

<a href="#" class="link">
  <div class="anchorDiv"></div>
</a>

Ensuring proper alignment within anchor links and buttons

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Exploring the Power of NPM Modules in an Electron Renderer

Is there a way to determine if JavaScript is responsible for triggering the update on my update panel?

Locate/place name with AngularJS and Google Maps integration

CSS: positioning controls at opposite ends of a table cell

Is there a way to download and store the PDF file created using html2pdf in Node.js on my local machine?

I am encountering a "TypeError: topics.forEach is not a function" error when attempting to retrieve metadata for topics using my kafkajs client in Node.js/express.js. Can anyone help me understand why

template not being loaded with form

`HTTP Streaming with Axios in a Node JS Environment`

What is the process for including an external .js file in my VueJS2 index.html?

Unit tests in Vue 3 do not utilize configureWebpack in vue.config.js

Troubleshooting problem with Angular's ng-repeat directive in dealing with varying number of child objects

Is it possible to incorporate a Material-UI theme palette color into a personalized React component?

Move the location of the mouse click to a different spot

Error: Namespace declaration does not have a type annotation - TypeScript/Babel

The Materialize CSS tabs are aligning vertically below each other, but functioning correctly upon refreshing the page

What could be causing my radio button list to stop functioning correctly? (After applying CSS)

Investigating TLS client connections with node.js for troubleshooting purposes

Aligning icons and text vertically in a list

Unable to execute findOneAndUpdate as a function

Is there a way to combine two addEventListeners into one for a single click event?