0

I cannot get my links to center on my divs. I understand that you could use line-height, but I dont not have fixed widths or heights on my divs they are all created based on the size of the screen. I have tried to vertical align with no success I'm sure I am just overlooking something my code is here in this fiddle for the example of the problem.

https://jsfiddle.net/6vwdah5e/

<section class="home-images">
        <div class="photo-grid">
            <a href="">
                <h2>Item 1</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 2</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 3</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 4</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 5</h2>
            </a>
        </div>
        <div class="photo-grid">
            <a href="">
                <h2>Item 6</h2>
            </a>
        </div>
    </section>
Alex Beyer
  • 147
  • 1
  • 8
  • you can just set the **padding-left** more, to make test.come in center. – Ajay P. Prajapati May 26 '15 at 22:21
  • `.photo-grid a { display: table; } .photo-grid a h2 { display: table-cell; vertical-align: middle; }` dunno what links you're even talking about and I don't even know what type of "centering" you're trying to achieve. Vertically or horizontally, etc. – chdltest May 26 '15 at 22:29

0 Answers0