Center watermark commands (#12779)

src/vs/workbench/parts/watermark/watermark.css

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-workbench .part.editor.empty.watermark-tips {
+.monaco-workbench .part.editor.empty.has-watermark {
 	background-position-y: calc(50% - 100px);
 	transition: background-position-y 1s;
 }
@@ -12,6 +12,13 @@
 	position: absolute;
 	width: 100%;
 	top: calc(50% + 55px);
+	text-align: center;
+}
+
+.monaco-workbench > .part.editor > .watermark > .watermark-box {
+	display: inline-table;
+	border-collapse: separate;
+	border-spacing: 13px 17px;
 }
 
 @keyframes watermarkfadein {
@@ -38,36 +45,29 @@
 	.monaco-workbench > .part.editor > .watermark {
 		opacity: 0;
 	}
-	.monaco-workbench .part.editor.empty.watermark-tips {
+	.monaco-workbench .part.editor.empty.has-watermark {
 		background-position-y: 50%;
 	}
 }
 
 .monaco-workbench > .part.editor > .watermark dl {
-	width: 100%;
+	display: table-row;
 	opacity: .8;
 	cursor: default;
 }
 
 .monaco-workbench > .part.editor > .watermark dt {
-	clear: left;
-	float: left;
-	width: 49%;
-	margin: 0 1% 0 0;
 	text-align: right;
 	font-weight: bold;
 }
 
 .monaco-workbench > .part.editor > .watermark dd {
-	float: left;
-	width: 49%;
-	margin: 0 0 0 1%;
 	text-align: left;
 }
 
 .monaco-workbench > .part.editor > .watermark dt,
 .monaco-workbench > .part.editor > .watermark dd {
-	margin-bottom: 17px;
+	display: table-cell;
 }
 
 .monaco-workbench > .part.editor > .watermark dt,

src/vs/workbench/parts/watermark/watermark.ts

@@ -36,15 +36,16 @@ const entries = [
 const UNBOUND = nls.localize('watermark.unboundCommand', "unbound");
 
 export function create(container: Builder, keybindingService: IKeybindingService): IDisposable {
-	const div = $(container)
-		.div({
-			'class': 'watermark',
-		});
+	const watermark = $(container)
+		.addClass('has-watermark')
+		.div({ 'class': 'watermark' });
+	const box = $(watermark)
+		.div({ 'class': 'watermark-box' });
 	function update() {
-		container.addClass('watermark-tips');
-		$(div).clearChildren()
-			.element('dl', {
-			}, dl => entries.map(entry => {
+		const builder = $(box);
+		builder.clearChildren();
+		entries.map(entry => {
+			builder.element('dl', {}, dl => {
 				dl.element('dt', {}, dt => dt.text(entry.text));
 				dl.element('dd', {}, dd => dd.text(
 					entry.ids
@@ -53,7 +54,8 @@ export function create(container: Builder, keybindingService: IKeybindingService
 							.join('') || UNBOUND)
 						.join(' / ')
 				));
-			}));
+			});
+		});
 	}
 	update();
 	return keybindingService.onDidUpdateKeybindings(update);