0

I am using LESS (CSS) trying to align a span (button text) inside a div (button). The span is centrally aligned horizontally but is top aligned vertically. I would also like the span object to adjust itself to the text size automatically.

Here's the LESS code:

.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);
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
EternallyCurious
  • 2,345
  • 7
  • 47
  • 78
  • can you share html or create fiddle what you have create so far? – Rajiv Ranjan Dec 02 '13 at 11:25
  • There's no hardcoded html. Its all dynamically generated by JQuery. the .blue-button class is applied to a div and the button-font to a span. – EternallyCurious Dec 02 '13 at 11:27
  • what the HTML generated by dynamic code, can you share? – Rajiv Ranjan Dec 02 '13 at 11:58
  • This is not really so much a LESS issue, as a CSS one. But [there](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) are many [answers](http://stackoverflow.com/questions/20245736/center-vertically-the-content-of-a-div) to it on [stack overflow](http://stackoverflow.com/questions/20246209/center-vertically-the-content-of-a-div-not-by-line-height). – ScottS Dec 02 '13 at 16:15

1 Answers1

0

You can achieve this by using the flexbox layout.

So by adding the following properties and values to the .button selector you can center the span.

 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;

Here is the full less file for reference.

@off-white: #fefefe;
@blue: #4286f4;
@small-border-radius: 5px;

.button(@color:@crimson-red) {
  border-radius: @small-border-radius;
  border-style: none;
  background-color: @color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-font {
  font-family: "Helvetica Neue", sans-serif;
  color: @off-white;
  font-weight: bold;
  font-size: 10pt;
  position: relative;
}

.blue-button {
  .button(@blue);
  width: 300px;
  height: 100px;
}

This would be the html:

<button class="blue-button">
    <span class="button-font">Hello, lots of text here</span>
</button>

Here is a link to a JSFiddle with compiled css.

nicholaschris
  • 1,401
  • 20
  • 27