0

I'm looking for suggestions on how to create this button using flex with as little html as possible. It has centered text but the icon is aligned to one side. Most important, the two are vertical-aligned in the middle.

Button with centered text and icon aligned to the side

The problem I have: once I setup the flex to align-items along the horizontal, I can no longer control the vertical centering without adding additional HTML containers around each item.

JSFiddle: https://jsfiddle.net/mwwy6bg7/3/

Let's assume that the height and padding on the button are not consistent, because there are other use-cases where I've had this same scenario, and the centered-string might be two or three lines long [while the icon is only one line]. So I cannot use padding or absolute positioning.

Up to this point, I've stuck to using non-flex because it uses less HTML. But I've found myself using absolute positions in cases as a result.

Solved: requires combining flexbox and position-absolute. Just need to apply flexbox twice. See: https://jsfiddle.net/mwwy6bg7/8/

<a href="/" class="button">
  Button with a long multiline label
  <span class="icon">&gt;</span>
</a>

.button {
  box-sizing: border-box;
  position: relative;
  width: 240px;
  height: 100px;
  padding: 0 20px;
  border: 1px solid #ccc;
  background: #f7f7f7;

  text-decoration: none;
  text-align: center;
  font: 16px arial, sans-serif;
  font-weight: bold;
  color: #595959;

  display: flex;
  align-items: center;
  justify-content: center;
}
a .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  display: flex;
  align-items: center;
}
ngDeveloper
  • 1,304
  • 2
  • 16
  • 34
  • @Paulie_D, because this question appears to be about flex alignment in a `button` element, this may be a more relevant dupe: http://stackoverflow.com/q/35464067/3597276 – Michael Benjamin May 11 '16 at 16:19
  • Well, it's called a "button" but whether an actual ` – Paulie_D May 11 '16 at 16:21
  • 1
    Frankly, I'd be using a background image for the icon and then the flexbox issue doesn't arise. – Paulie_D May 11 '16 at 16:22
  • @Paulie_D It's an ng-material "button", so it could be either hyperlink or button. I notice the browser-standard ` – ngDeveloper May 11 '16 at 16:25
  • @Paulie_D I'm using svg-sprite for the icons (to prevent blurry images on high-resolution devices). That caused certain limitations, one being there's no proper way to use it in a background image. – ngDeveloper May 11 '16 at 16:27

0 Answers0