5 Replies Latest reply: Jun 9, 2012 5:30 AM by MurraySummers RSS

    Centering an image

    kcfi Community Member

      For the life of me I cannot make this work. I'm trying to update one of my pages and cleanup the code. All I want to do is center the two images and one line of text under the banner div. It's working on the uploaded page, but not the local version I'm revising.

       

      Here's the older page:

      http://www.lash-it.com/contact/contact.html

       

      and the css stylesheet:

      http://www.lash-it.com/listite.css

        • 1. Re: Centering an image
          kcfi Community Member

          If I make write the code this way it works, but I know I'm not suppose to use the <h2> tag for this. What do I need to change to make this work without the <h2>?

           

          <style>

          h2 {

                    text-align: center;

          }

          </style>

          </head>

           

           

          <body>

          <div class="container" id="container">

            <h2>

              <img src="../assets/email/emailaddress.gif" alt="" width="500" height="156"><img src="../assets/logo.png" alt="" width="670" height="454"><br>

              <strong>(800) 408-5245</strong><br>

            </h2>

          </div>

          </body>

          </html>

          • 2. Re: Centering an image
            kcfi Community Member

            OK. I think I have it. I need to span the class="container" with another class. I named it .center. Seems to work. Any problems that you see?

             

            <style>

            .center {

                      text-align: center;

            }

            </style>

            </head>

             

             

            <body>

            <div class="container" id="container">

             

                <span class="center"><img src="../assets/email/emailaddress.gif" alt="" width="500" height="156"><img src="../assets/logo.png" alt="" width="670" height="454"><br>

                <strong>(800) 408-5245</strong></span><br>

             

            </div>

            </body>

            </html>

            • 3. Re: Centering an image
              adninjastrator Community Member

              Create a separate class to center images:

              .center_img {

                    display: block;

                    margin-left: auto;

                    margin-right: auto;

              }

              and then another to center text:

              .center_this {

                    text-align: center;

              }

              Best wishes,

              Adninjastrator

              • 4. Re: Centering an image
                kcfi Community Member

                Adninjastrator,

                That works well. Thanks. It eliminates <span class="center">. I added display: block to the .center_this style, then I could remove the <br>s that surrounded the line of text. Do you see any problems with my doing that?

                 

                .center_img {

                          display: block;

                          margin-left: auto;

                          margin-right: auto;

                }

                .center_this {

                          text-align: center;

                          display: block;

                 

                <img src="../assets/email/emailaddress.gif" alt="" width="500" height="156" class="center_img">

                <img src="../assets/logo.png" alt="" width="670" height="454" class="center_img">

                <strong class="center_this">(800) 408-5245</strong>


                • 5. Re: Centering an image
                  MurraySummers ACP/MVPs

                  Why not just do it this way?

                   

                  #container img {

                       display:block;

                       margin:0 auto;

                  }

                  #container p {

                       text-align:center;

                       font-weight:bold;

                  }

                   

                  ...

                   

                  <div id="container">

                      

                    <img src="../assets/email/emailaddress.gif" alt="" width="500" height="156" class="center_img">

                    <img src="../assets/logo.png" alt="" width="670" height="454" class="center_img">

                    <p>(800) 408-5245</p>

                  </div>