![Avatar of mikha](https://cdn.experts-exchange.com/images/experts-exchange/avatar-01-large.gif)
how to align html elements vertically centered
say, when there is a label/span/anchor next to an image/icon , what is the best way them to align them vertically, so that both are centered vertically.
for example , I have anchor tag and a input type of button next to each other in a div, like below, how can i align them vertically centered?
<div>
<a href="" ...>
<input type =button....>
</div>
for example , I have anchor tag and a input type of button next to each other in a div, like below, how can i align them vertically centered?
<div>
<a href="" ...>
<input type =button....>
</div>
![Avatar of lenamtl](https://filedb.experts-exchange.com/files/public/2013/11/18/82d2903f-9e67-43e4-ab32-65dfd7bfa904.png)
Hi,
I don't recommend to use Table for a form...
I recommend to use Bootstrap it will help you to align things and also this will add responsiveness.
Here is an example of form with Bootstrap
https://getbootstrap.com/docs/4.1/components/forms/
Also they is some helper class to align
https://getbootstrap.com/docs/4.1/utilities/vertical-align/
I don't recommend to use Table for a form...
I recommend to use Bootstrap it will help you to align things and also this will add responsiveness.
Here is an example of form with Bootstrap
https://getbootstrap.com/docs/4.1/components/forms/
Also they is some helper class to align
https://getbootstrap.com/docs/4.1/utilities/vertical-align/
![Avatar of Pavel Gushchin](https://filedb.experts-exchange.com/files/public/2021/8/21/da528b4d-c82e-471d-ad00-7a90b1b0d814.png)
Bootstrap is more complicated solution, because it requires to load more libraries and makes the web-page loading time longer!
Of course, if author of this question doesn't use bootstrap on his page yet...
Of course, if author of this question doesn't use bootstrap on his page yet...
![Avatar of lenamtl](https://filedb.experts-exchange.com/files/public/2013/11/18/82d2903f-9e67-43e4-ab32-65dfd7bfa904.png)
Here is the Bootstrap usage statistics
https://trends.builtwith.com/docinfo/Twitter-Bootstrap
https://trends.builtwith.com/docinfo/Twitter-Bootstrap
![Avatar of Snarf0001](https://filedb.experts-exchange.com/files/public/2013/11/18/5599fcf0-756e-4eaf-b124-37ad1d83d224.png)
Personally I'm not a fan of Bootstrap, though I realize in in the far minority there. If you're not using it already, then not worth the time and rewrite to implement it.
But please don't use table for layout, very strongly agree with lenamtl on that.
For a simple vertical alignment, you can use this:
But please don't use table for layout, very strongly agree with lenamtl on that.
For a simple vertical alignment, you can use this:
.aligned { display:flex; align-items:center; }
<div class="aligned">
<a href="" ...>
<input type =button....>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
![Avatar of Pavel Gushchin](https://filedb.experts-exchange.com/files/public/2021/8/21/da528b4d-c82e-471d-ad00-7a90b1b0d814.png)
I agree, that using different CSS tricks you can achieve this result... But, as you said, for old browsers you need extra code, etc...
I don't see that my code on tables has a bad and old style. Why? Thare is no explanation.
"Table" is standard tag, which supported by ALL browsers of ALL versions. And it works anywhere perfectly!
Somebody tells you, that table displays only when the whole content of inner cells will be loaded... Ok, I agree! But, in our 21 century and fast speeds internet, we will not even notice that!
I don't see that my code on tables has a bad and old style. Why? Thare is no explanation.
"Table" is standard tag, which supported by ALL browsers of ALL versions. And it works anywhere perfectly!
Somebody tells you, that table displays only when the whole content of inner cells will be loaded... Ok, I agree! But, in our 21 century and fast speeds internet, we will not even notice that!
![Avatar of David S.](https://filedb.experts-exchange.com/files/public/2013/11/18/07ed2f4f-5d93-42ab-8e69-2aae2218b069.png)
Pavel, in the case of the code I suggested, the unsupported browsers are exceedingly old. Does anyone still support them on public websites?
There definitely is an explanation why it's bad to use a <table> like that. It's called "semantics," and part of that is only using a <table> when you want multiple rows and columns to display tabular data, like in a spreadsheet.
There definitely is an explanation why it's bad to use a <table> like that. It's called "semantics," and part of that is only using a <table> when you want multiple rows and columns to display tabular data, like in a spreadsheet.
Open in new window