diff --git a/dw/textblock_linebreaking.cc b/dw/textblock_linebreaking.cc
index 1a95cb70..06486c12 100644
--- a/dw/textblock_linebreaking.cc
+++ b/dw/textblock_linebreaking.cc
@@ -1804,7 +1804,23 @@ void Textblock::alignLine (int lineIndex)
          int lineBreakWidth =
             this->lineBreakWidth - (line->leftOffset + line->rightOffset);
 
-         switch (firstWord->style->textAlign) {
+         core::style::TextAlignType alignStyle = core::style::TEXT_ALIGN_LEFT;
+
+         /**
+          * Only inline elements should be affected by the text-align property.
+          * While alignStyle will still apply to other elements, the default
+          * value of TEXT_ALIGN_LEFT will have no effect on the alignment.
+          */
+         if (firstWord->style->display == core::style::DISPLAY_INLINE ||
+             firstWord->style->display == core::style::DISPLAY_INLINE_BLOCK) {
+            /**
+             * Elements that *are* affected by text-align are aligned based on
+             * the text-align value of their containing element.
+             */
+            alignStyle = getStyle()->textAlign;
+         }
+
+         switch (alignStyle) {
          case core::style::TEXT_ALIGN_LEFT:
             DBG_OBJ_MSG ("construct.line", 1,
                          "first word has 'text-align: left'");
diff --git a/test/html/Makefile.am b/test/html/Makefile.am
index e9f9ef4c..29fb39f3 100644
--- a/test/html/Makefile.am
+++ b/test/html/Makefile.am
@@ -59,5 +59,4 @@ XFAIL_TESTS = \
 	render/min-width-html.html \
 	render/multiple-floats.html \
 	render/span-padding.html \
-	render/table-td-width-percent.html \
-	render/text-align-center.html
+	render/table-td-width-percent.html
diff --git a/test/html/render/text-align-center.html b/test/html/render/text-align-center.html
index 2924df51..0254a730 100644
--- a/test/html/render/text-align-center.html
+++ b/test/html/render/text-align-center.html
@@ -3,19 +3,73 @@
   <head>
     <title>Test text-align: center</title>
     <style>
-      .outer {
+      .center {
+        background-color:aquamarine;
+        text-align: center;
+        width: 400px;
+      }
+
+      .outer1 {
         background-color:coral;
         width: 400px;
       }
-      .inner {
+      .inner1 {
         background-color:aquamarine;
         text-align: center;
         width: 100px;
       }
+
+      .outer2 {
+        background-color:coral;
+        text-align: center;
+        width: 400px;
+      }
+      .inner2 {
+        background-color:aquamarine;
+        width: 100px;
+      }
+
+      .outer3 {
+        background-color:coral;
+        width: 400px;
+      }
+      .inner3 {
+        background-color:aquamarine;
+        text-align: center;
+        width: 100px;
+      }
+
+      .outer4 {
+        background-color:coral;
+        text-align: center;
+        width: 400px;
+      }
+      .inner4 {
+        background-color:aquamarine;
+        width: 100px;
+      }
+
+      body > div {
+        margin-bottom: 10px;
+      }
     </style>
   </head>
   <body>
-    <div class="outer">
-      <div class="inner">center</div>
+    <div class="center">simple centered text</div>
+
+    <div class="outer1">
+      <div class="inner1">nested div with internal center</div>
+    </div>
+
+    <div class="outer2">
+      <div class="inner2">nested div with external center</div>
+    </div>
+
+    <div class="outer3">
+      <span class="inner3">nested span with internal center</span>
+    </div>
+
+    <div class="outer4">
+      <span class="inner4">nested span with external center</span>
     </div>
 </html>
diff --git a/test/html/render/text-align-center.ref.html b/test/html/render/text-align-center.ref.html
index f0048d42..863b967f 100644
--- a/test/html/render/text-align-center.ref.html
+++ b/test/html/render/text-align-center.ref.html
@@ -8,20 +8,70 @@
         margin: 0;
         padding: 0;
       }
-      .outer {
+      table {
+        margin-bottom: 10px;
+      }
+
+      .center {
+        background-color: aquamarine;
+        width: 400px;
+      }
+      .center td {
+        text-align: center;
+      }
+
+      .outer1 {
+        background-color:coral;
+        width: 400px;
+      }
+      .inner1 {
+        background-color:aquamarine;
+        text-align: center;
+        width: 100px;
+      }
+
+      .outer3 {
         background-color:coral;
         width: 400px;
       }
-      .inner {
+      .inner3 {
         background-color:aquamarine;
         text-align: center;
         width: 100px;
+        white-space: nowrap;
+      }
+
+      .outer4 {
+        background-color:coral;
+        width: 400px;
+      }
+      .inner4 {
+        background-color:aquamarine;
+        text-align: center;
+        width: 100px;
+        white-space: nowrap;
       }
     </style>
   </head>
   <body>
-    <table class="outer">
-      <tr><td class="inner">center</td><td></td></tr>
+    <table class="center">
+      <tr><td>simple centered text</td><td></td></tr>
+    </table>
+
+    <table class="outer1">
+      <tr><td class="inner1">nested div with internal center</td><td></td></tr>
+    </table>
+
+    <table class="outer1">
+      <tr><td class="inner1">nested div with external center</td><td></td></tr>
+    </table>
+
+    <table class="outer3">
+      <tr><td class="inner3">nested span with internal center</td><td></td></tr>
+    </table>
+
+    <table class="outer4">
+      <tr><td></td><td class="inner4">nested span with external center</td><td></td></tr>
     </table>
   </body>
 </html>
