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

    Centering an image

    kcfi Level 1

      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 Level 1

          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 Level 1

            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 Level 4

              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 Level 1

                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 MVP & Adobe Community Professional

                  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>