将第二个标题与图像和灯箱居中

Question

我遇到的问题是我希望 "See More" link 直接位于每个标题 link 的中央。现在它只是被推到右边，我不知道如何解决这个问题。如果有人知道如何帮助我解决这个问题，那将非常有帮助。我尝试在 "See More" link 上显示：阻止，但没有任何反应，所以我可以使用一些建议。我在此处添加代码笔而不是代码段，因为灯箱 Js 超长。抱歉给您带来不便。谢谢！

http://codepen.io/anon/pen/ggNmYo

<div id="recentwork">
<h2 id="recent"> Most Recent Work</h2>


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
<h3> Title</h3>
</br>
<a href="" class="more"><h3 > See More</h3></a>
</a>


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
 <img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
 <h3> Title</h3>
 </br>
  <a href="" class="more"><h3 > See More</h3></a>
 </a>


<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
  <h3> Title</h3>
   </br>
   <a href="" class="more"><h3 > See More</h3></a>
</a>


 <a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
  <h3> Title</h3>
  </br>
    <a href="" class="more"><h3 > See More</h3></a>
  </a>



</div>

Answer 1

尝试将您的项目元素更改为：

<div class="parentdiv">
<a href="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" data-lightbox="website" data-title="">
<img src="https://upload.wikimedia.org/wikipedia/en/f/f2/Seesmic_Logo.png" width="200px" height="200px">
<h3> Title</h3>
</a>
<a href="" class="more"><h3 > See More</h3></a>
</div>

然后，将 css 中的 display: inline-block 从 #recentwork a 移动到 .parentdiv。

代码笔：http://codepen.io/NotABlueWhale/pen/mRZWrX

将第二个标题与图像和灯箱居中

Centering second title with images and lightbox

html

javascript

css

jquery

lightbox