Wyśrodkowanie edytora WYSIWYG - TinyMCE w boxie

0

Hejka, czy wie ktoś może jak wyśrodkować panel ekran z panelem edytora TinyMCE w tym niebieskim boxie?
Link do live: https://jsfiddle.net/42xebdeh/

Kod:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>TinyMCE</title>
	<style>
		* { margin: 0; padding: 0;}
		.box { width: 80%; background-color: #abcdef; margin: 50px auto; }
		textarea { width: 50%; }
	</style>
</head>
<body>
	<div class="box">
		<textarea>
			
		</textarea>
	</div>
	<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
	<script>
		tinymce.init({
		selector: 'textarea',
		height: 300,
		width: 900,
		menubar: false,
		plugins: [
		  'advlist autolink lists link image charmap print preview anchor',
		  'searchreplace visualblocks code fullscreen',
		  'insertdatetime media table contextmenu paste code'
		],
		toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
		content_css: '//www.tinymce.com/css/codepen.min.css'
		});	
	</script>
</body>
</html>
0

W skrypcie js zmień:

width: 900,

na:

width: '100%',
0

No tak, ale chodzi o to, żeby o było równe: height: 100 i width: 400.
Natomiast tak jakby zastosować tam tak jak w CSS: margin 0 auto. Żeby wycentrować boxa z edytorem o tych wymiarach.

0

Możesz użyc display: flex oraz justify-content, żeby wyśrodkować zawartość boxa.

https://jsfiddle.net/42xebdeh/2/

1 użytkowników online, w tym zalogowanych: 0, gości: 1