diff --git a/CHANGES b/CHANGES
index 0d72f3e6291..c16b94bc08a 100644
--- a/CHANGES
+++ b/CHANGES
@@ -69,6 +69,7 @@ Bugs fixed
 ----------
 
 * #6925: html: Remove redundant type="text/javascript" from <script> elements
+* #7112: html: SVG image is not layouted as float even if aligned
 * #6906, #6907: autodoc: failed to read the source codes encoeded in cp1251
 * #6961: latex: warning for babel shown twice
 * #7059: latex: LaTeX compilation falls into infinite loop (wrapfig issue)
diff --git a/sphinx/themes/basic/static/basic.css_t b/sphinx/themes/basic/static/basic.css_t
index e72db12494c..dbe0997d65c 100644
--- a/sphinx/themes/basic/static/basic.css_t
+++ b/sphinx/themes/basic/static/basic.css_t
@@ -271,25 +271,25 @@ p.rubric {
     font-weight: bold;
 }
 
-img.align-left, .figure.align-left, object.align-left {
+img.align-left, .figure.align-left, object.align-left, div.img.align-left {
     clear: left;
     float: left;
     margin-right: 1em;
 }
 
-img.align-right, .figure.align-right, object.align-right {
+img.align-right, .figure.align-right, object.align-right, div.img.align-right {
     clear: right;
     float: right;
     margin-left: 1em;
 }
 
-img.align-center, .figure.align-center, object.align-center {
+img.align-center, .figure.align-center, object.align-center, div.img.align-center {
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
-img.align-default, .figure.align-default {
+img.align-default, .figure.align-default, div.img.align-default {
   display: block;
   margin-left: auto;
   margin-right: auto;
diff --git a/sphinx/writers/html.py b/sphinx/writers/html.py
index 84cdcc15bfc..c5d3c50b5db 100644
--- a/sphinx/writers/html.py
+++ b/sphinx/writers/html.py
@@ -609,7 +609,7 @@ def visit_image(self, node: Element) -> None:
                     atts['height'] = int(atts['height']) * scale
             atts['alt'] = node.get('alt', uri)
             if 'align' in node:
-                self.body.append('<div align="%s" class="align-%s">' %
+                self.body.append('<div align="%s" class="img align-%s">' %
                                  (node['align'], node['align']))
                 self.context.append('</div>\n')
             else:
diff --git a/sphinx/writers/html5.py b/sphinx/writers/html5.py
index 087c92842df..5b397be98d6 100644
--- a/sphinx/writers/html5.py
+++ b/sphinx/writers/html5.py
@@ -550,7 +550,7 @@ def visit_image(self, node: Element) -> None:
                     atts['height'] = int(atts['height']) * scale
             atts['alt'] = node.get('alt', uri)
             if 'align' in node:
-                self.body.append('<div align="%s" class="align-%s">' %
+                self.body.append('<div align="%s" class="img align-%s">' %
                                  (node['align'], node['align']))
                 self.context.append('</div>\n')
             else: