1 Reply Latest reply on May 10, 2012 10:48 PM by SeánÓS

    Centering hr element

    honyk Level 1

      Hello Everyone,

       

      I am testing ePub outputs and I am unable to style <hr> element properly so that it is centered in ADE while in both FF and MSIE it is displayed correctly. Is there necessary any special treatment? Here is the current css:

       

      hr {
         width: 100px;
         text-align: center;
         margin: 0 auto;
      }

       

      Thanks in advance for any hints.

       

      Jan

        • 1. Re: Centering hr element
          SeánÓS

          Far too late as a reply, but just in case someone finds this in a search...

           

          First off, don't use pixels for width; use a percentage.  You don't know the dimensions of the device it will be read on.

           

          The stupid hack to make this work (are Adobe trying to outdo Microsoft??) is to set the left-margin to half the remaining width after subtracting the hr width. E.g.

           

          hr {

              width: 70%;

              margin-left: 15%;

          }

           

          Browsers seem to centre by default, so I'm not sure of the value of putting in a ‘text-align: center’ but Adobe will totally ignore it anyway!