8 Replies Latest reply on Jul 18, 2011 5:55 AM by rickbreda1

    horizontal align center in table-cell

    rickbreda1 Level 1

      Hello,

       

      I'm having a problem getting to horizontally align a div (schilderij) in another div (schilderijholder).

      This schilderij div has a height and width of 480px and has display: table-cell. The content of this div is an image, with different sizes on every page (there are multiple pages, it is some sort of photogallery). The images are nicely centered, horizontally and vertically, inside this div.

      The containing div (schilderijholder), has a width of 100% of it's containing block, which has a variable size

      The problem is, I cant get the schilderij div horizontally centered in the schilderijholder div.

       

      Here's the simplified code. If you need the whole code, I can post that too.

       

       

          <div class="leftWrapper" style="clear: none; float: left; width: 68%; height: 100%;">

          <div class="content" style="margin: 40 10 50 30;">

            <div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">

                <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">

                  <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />

                  </div>

                </div>

       

       

              <div id="pageControl">

              <span class="left">

                <a href="schilderijen2.html"></a> </span>

                <span class="right">

                <a href="02.html">Volgende</a>

                  </span>

                </div>

       

            </div>

           </div>

       

       

      What I've tried:

           - "margin: 0 auto;" on the schilderij div

           - "position: relative;" on the schilderijholder div and "position: absolute; left: 50%; margin-left: -240px;" on the schilderij div

      But these both don't work.

       

      Does anybody know a solution for this, or maybe has something to put me on the right way?

      Thanks in advance!

        • 1. Re: horizontal align center in table-cell
          MurraySummers Level 8

          Let's fix your code first:

           

          <div class="leftWrapper" style="float: left; width: 68%; height: 100%;">

           

           

              <div class="content" style="margin: 40px 10px 50px 30px;">

                <div id="schilderijholder" style="text-align: center; width: 100%; height: 100%;">

                    <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">

                      <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />

                      </div>

                    </div>

           

           

                  <div id="pageControl">

                  <span class="left">

                    <a href="schilderijen2.html"></a> </span>

                    <span class="right">

                    <a href="02.html">Volgende</a>

                      </span>

                    </div>

           

                </div>

               </div>

           

           

           

          Why do you need the div#schilderij at all?  Seems unnecessary to me.

           

          Then you would need the display:table-cell on the parent to this div, not on the div#schilderij, which has basically the same dimensions as the image.  But I think this is all too complicated.  Why not just this?

           

          <div class="leftWrapper" style="float: left; width: 68%;">

           

           

              <div class="content" style="margin: 40px 10px 50px 30px;">

                <div id="schilderijholder" style="text-align: center;">

                      <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />

                      </div>

                    </div>

           

           

                  <div id="pageControl">

                  <span class="left">

                    <a href="schilderijen2.html"></a> </span>

                    <span class="right">

                    <a href="02.html">Volgende</a>

                      </span>

                    </div>

           

                </div>

               </div>

           

          • 2. Re: horizontal align center in table-cell
            rickbreda1 Level 1

            Thanks for your reply!

             

            I deleted the clear: none; from the leftWrapper.

            The margins were already good, because on my external style sheet, I have top-margin right-margin bottom-margin and left-margin, because dreamweaver creates it like that, all with px behind it, but I forgot that I have to do that too when you only use margin.

             

            To answer your two questions in order:

             

            At first I didn't have div#schilderijholder, because I thought I could easily just center div#schilderij inside div.content. But that didn't work out, so I began trying a lot of different things. While trying I created that div#schilderijholder, which I really don't need actually.

            I use div#schilderij, because all the images are different sizes, with a width or height of 480px, depending on wether the image is landscape or portrait.

             

            When I would use your code, the images that have a greater width than height, will not be centered vertically.

             

             

            I will delete the div#schilderijholder. I will keep this then:

             

             

            <div class="leftWrapper" style="float: left; width: 68%; height: 100%;">

             

             

                <div class="content" style="margin: 40px 10px 50px 30px;">

                      <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">

                        <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" align="center" />

                        </div>

             

             

                    <div id="pageControl">

                    <span class="left">

                      <a href="schilderijen2.html"></a> </span>

                      <span class="right">

                      <a href="02.html">Volgende</a>

                        </span>

                      </div>

             

                  </div>

                 </div>

             

             

            The result is just the same, how would I be able to center div#schilderij horizontally then?

            • 3. Re: horizontal align center in table-cell
              MurraySummers Level 8

                  <div class="content" style="margin: 40px 10px 50px 30px;">

                        <div id="schilderij" style=" height: 480px; width: 480px; text-align: center; vertical-align: middle; display: table-cell;">

                          <img src="../Assets/Schilderijen/normal/01.jpg" width="399" height="480" />

                          </div>

               

              That should work to horizontally center your image.  Is it not?

              • 4. Re: horizontal align center in table-cell
                rickbreda1 Level 1

                So you mean what I have right now, without the align="center" on the image?

                 

                I tried it, it didn't work.

                 

                Div#schilderij keeps aligned to the left.

                • 5. Re: horizontal align center in table-cell
                  MurraySummers Level 8

                  Please post a link to the live page so we can see what might be preventing this from working.

                  • 7. Re: horizontal align center in table-cell
                    osgood_ Level 8

                    rickbreda1 wrote:

                     

                    sure!

                     

                    It is this page: http://rickbreda.byethost6.com/joanna/schilderijpaginas/01.html

                     

                    Try margin: 0 auto; as shown below:

                     

                    #schilderijen .wrapper .contentWrapper .leftWrapper .content #schilderij {
                        height: 480px;
                        width: 480px;
                        text-align: center;
                        vertical-align: middle;
                        display: table-cell;
                    margin: 0 auto;
                    }

                    • 8. Re: horizontal align center in table-cell
                      rickbreda1 Level 1

                      I've already tried that. It doesn't work, but I have no idea why not?

                       

                      Does there exist some sort of list in which is described when css margins don't work, so I could go through that whole list?