CSS align buttons

Question

I have 3 buttons, 1 of them has an image. The issue is that the last one doesn´t render align with the other othe buttons.

.matrix-size {
    height: 40px;
    cursor: pointer;
}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<button class="matrix-size">$$ { \left( 2 \times 4 \right) } $$</button>
<button class="matrix-size">$$ { \left( 5 \times 5 \right) } $$</button>
<button class="matrix-size"><img src="https://es.symbolab.com/public/img/pad_matrixnxn.png
"></button>

What should I do to make them aligned

score 1 · Accepted Answer · answered Jul 12 '21 at 14:23

You need to set the vertical align to something other than the default of baseline. Try top:

.matrix-size {
  height: 40px;
  cursor: pointer;
  vertical-align: top;
}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<button class="matrix-size">$$ { \left( 2 \times 4 \right) } $$</button>
<button class="matrix-size">$$ { \left( 5 \times 5 \right) } $$</button>
<button class="matrix-size"><img src="https://es.symbolab.com/public/img/pad_matrixnxn.png
"></button>

score 1 · Answer 2 · answered Jul 12 '21 at 14:34

1

.matrix-size {
    height: 40px;
    cursor: pointer;
    vertical-align: top;
    

}

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<button class="matrix-size">$$ { \left( 2 \times 4 \right) } $$</button>
<button class="matrix-size">$$ { \left( 5 \times 5 \right) } $$</button>
<button class="matrix-size"><img src="https://es.symbolab.com/public/img/pad_matrixnxn.png
"></button>

answered Jul 12 '21 at 14:34

Mitanshu Baldha

11
1

1

Already answered. And please comment as to why this is – mplungjan Jul 12 '21 at 14:35
Welcome to Stack Overflow! While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Kevin M. Mansour Jul 12 '21 at 15:55

CSS align buttons

2 Answers2