Fix button vertical alignment (#232)

Buttons now correctly align regardless of if they have icons next to them.
elastic · Dec 20, 2017 · ff4b42f · ff4b42f
1 parent 7671408
commit ff4b42f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.7`.
+**Bug fixes**
+
+- Fix button vertical alignment. [(#232)](https://github.com/elastic/eui/pull/232)
 
 # [`0.0.7`](https://github.com/elastic/eui/tree/v0.0.7)
 

diff --git a/src/components/button/_index.scss b/src/components/button/_index.scss
@@ -16,6 +16,7 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 80%);
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  vertical-align: middle;
 
   &:hover:not(:disabled) {
     transform: translateY(-1px);
@@ -41,6 +42,7 @@ $euiButtonColorDisabled: tintOrShade($euiTextColor, 70%, 80%);
 @mixin euiButtonContent($isReverse: false) {
   height: 100%;
   width: 100%;
+  vertical-align: middle;
 
   @if ($isReverse) {
     flex-direction: row-reverse;