I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically adjust its size based on the text content.
Below is the code snippet in LESS:
.button(@color:@crimson-red) {
border-radius: @small-border-radius;
border-style: none;
background-color: @color;
text-align: center;
display: inline-block;
}
.button-font {
vertical-align: middle;
overflow: auto;
font-family: "Helvetica Neue", sans-serif;
color: @off-white;
font-weight: bold;
font-size: 10pt;
position: relative;
}
.blue-button {
.button(@blue);
}