IE5 vertical alignment
I'm working on a project for a scanner that runs IE5 (yes, I know!) And they were asking for the link to be a block-height element. Within this block, they want the content to be centered both vertically and horizontally.
I have this html (for one):
<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
<h4>Cancel</h4>
</a>
and SCSS for this:
.block {
display: inline-block;
*zoom: 1;
*display: inline;
height: 100%;
width: 100%;
background-color: #3C60EF;
.block-content {
padding: 4px;
> h1, > h2, > h3, > h4, > h5 {
margin-top: 0;
}
@media screen and (min-width: 992px) {
padding: 10px;
}
}
}
.block.vertical-align {
display: table-cell;
vertical-align: middle;
h3, h4, h5, h6, p, .block-content {
padding: 0 10px !important;
}
form {
.form-group {
margin: 0;
}
}
}
a.block {
background-position: center center;
background-repeat: no-repeat;
}
.text-center {
text-align: center;
}
this works fine on my machine (using latest browsers), but everything is aligned up on the scanner.
Can anyone suggest anything that can help me?
+3
source to share
1 answer
<style>
.text-center {
text-align: center;
}
.fullFrame{
width: 100%;
height: 100%;
}
</style>
<table class="fullFrame">
<tr>
<td class="text-center">
<a class="block cancel vertical-align text-center" href="#" id="btn-cancel">
<h4>Cancel</h4>
</a>
</td>
</tr>
</table>
This will make the cancel link in the vertical and horizontal center of the page. I could only test as IE6 and it seemed to work. Not sure about IE5, but I don't know why you would like to try to support this as it is very deprecated.
0
source to share