diff --git a/core/modules/ckeditor/js/plugins/drupalimagecaption/theme.js b/core/modules/ckeditor/js/plugins/drupalimagecaption/theme.js
index 21a9f903ede779ac148a35a2da6a1b8fd19a2973..e0a2d07fdeb6c856659d76c2a5a666ca547a58f9 100644
--- a/core/modules/ckeditor/js/plugins/drupalimagecaption/theme.js
+++ b/core/modules/ckeditor/js/plugins/drupalimagecaption/theme.js
@@ -56,11 +56,11 @@
                 this.parts.caption.setStyle('display', this.data.hasCaption ? '' : 'none');
 
                 // Set the alignment, if any.
-                this.element.removeClass('caption-left');
-                this.element.removeClass('caption-center');
-                this.element.removeClass('caption-right');
+                this.element.removeClass('align-left');
+                this.element.removeClass('align-center');
+                this.element.removeClass('align-right');
                 if (this.data.data_align) {
-                  this.element.addClass('caption-' + this.data.data_align);
+                  this.element.addClass('align-' + this.data.data_align);
                 }
               }
             }
@@ -101,7 +101,7 @@
               if (captionValue !== undefined) {
                 var classes = 'caption caption-img';
                 if (alignValue !== null) {
-                  classes += ' caption-' + alignValue;
+                  classes += ' align-' + alignValue;
                 }
                 figure = el.wrapWith(new CKEDITOR.htmlParser.element('figure', { 'class': classes }));
                 var caption = CKEDITOR.htmlParser.fragment.fromHtml(captionValue || '', 'figcaption');
@@ -167,7 +167,7 @@
               // Build the HTML for the widget.
               var html = '<figure class="caption caption-img';
               if (returnValues.attributes.data_align && returnValues.attributes.data_align !== 'none') {
-                html += ' caption-' + returnValues.attributes.data_align;
+                html += ' align-' + returnValues.attributes.data_align;
               }
               html += '"><img ';
               for (var attr in returnValues.attributes) {
diff --git a/core/modules/filter/css/filter.caption.css b/core/modules/filter/css/filter.caption.css
index 0b3d8e59ec351999160f7914b34ba64f335c41fd..c436f1bdb54b415942e1ffba137921bbdda5b4c9 100644
--- a/core/modules/filter/css/filter.caption.css
+++ b/core/modules/filter/css/filter.caption.css
@@ -8,7 +8,6 @@
  */
 .caption {
   display: table;
-  margin: 0;
 }
 .caption > * {
   display: block;
@@ -29,30 +28,3 @@
   content: attr(data-placeholder);
   font-style: italic;
 }
-
-/**
- * Caption alignment.
- */
-.caption-left {
-  float: left; /* LTR */
-  margin-left: 0; /* LTR */
-}
-[dir="rtl"] .caption-left {
-  float: right;
-  margin-left: auto;
-  margin-right: 0;
-}
-.caption-right {
-  float: right; /* LTR */
-  margin-right: 0; /* LTR */
-}
-[dir="rtl"] .caption-right {
-  float: left;
-  margin-left: 0;
-  margin-right: auto;
-}
-.caption-center {
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
-}
diff --git a/core/modules/filter/lib/Drupal/filter/Tests/FilterUnitTest.php b/core/modules/filter/lib/Drupal/filter/Tests/FilterUnitTest.php
index 853734692c5efc1b6dc50248e9e189f8483eb9f9..f686cee49ff979442d8892bdebbe5f1406bd5b78 100644
--- a/core/modules/filter/lib/Drupal/filter/Tests/FilterUnitTest.php
+++ b/core/modules/filter/lib/Drupal/filter/Tests/FilterUnitTest.php
@@ -115,13 +115,13 @@ function testCaptionFilter() {
     // Both data-caption and data-align attributes: all 3 allowed values for the
     // data-align attribute.
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="left" />';
-    $expected = '<figure class="caption caption-img caption-left"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-left"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $this->assertIdentical($expected, $test($input));
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="center" />';
-    $expected = '<figure class="caption caption-img caption-center"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-center"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $this->assertIdentical($expected, $test($input));
     $input = '<img src="llama.jpg" data-caption="Loquacious llama!" data-align="right" />';
-    $expected = '<figure class="caption caption-img caption-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $this->assertIdentical($expected, $test($input));
 
     // Both data-caption and data-align attributes, but a disallowed data-align
@@ -132,7 +132,7 @@ function testCaptionFilter() {
 
     // Ensure the filter also works with uncommon yet valid attribute quoting.
     $input = '<img src=llama.jpg data-caption=\'Loquacious llama!\' data-align=right />';
-    $expected = '<figure class="caption caption-img caption-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
+    $expected = '<figure class="caption caption-img align-right"><img src="llama.jpg" /><figcaption>Loquacious llama!</figcaption></figure>';
     $this->assertIdentical($expected, $test($input));
 
     // Security test: attempt to inject an additional class.
diff --git a/core/modules/filter/templates/filter-caption.html.twig b/core/modules/filter/templates/filter-caption.html.twig
index 2f9d33115f892debfb810551ea7cacf0bf1a388f..0c73b9fd4dd17b01a26eadb6eb4e9905acb1464a 100644
--- a/core/modules/filter/templates/filter-caption.html.twig
+++ b/core/modules/filter/templates/filter-caption.html.twig
@@ -10,7 +10,7 @@
  *   NULL.
  */
 #}
-<figure class="caption caption-{{ tag }} {%- if align %} caption-{{ align }} {%- endif %}">
+<figure class="caption caption-{{ tag }} {%- if align %} align-{{ align }} {%- endif %}">
 {{ node }}
 <figcaption>{{ caption }}</figcaption>
 </figure>