Aligning the second heading alongside pictures and a lightbox

My issue is that I am struggling to center the "See More" link directly under each title link. Currently, it is pushed to the right and I can't seem to find a solution. Any help with this problem would be greatly appreciated. I attempted using display: block on the "See More" link, but it had no effect, so any advice would be welcomed. Instead of providing a code snippet here due to the lengthy lightbox Js, I've included a CodePen link for reference. Apologies for any inconvenience. Thank you!

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>
javascriptjqueryhtmlcsslightbox

Answer №1

Consider adjusting the elements in your project with this new configuration:

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

You should also transfer display: inline-block from #recentwork a to .parentdiv section of your CSS.

Check out the code on Codepen for a visual representation: http://codepen.io/NotABlueWhale/pen/mRZWrX

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to alter the appearance of individual characters in the text input

My latest project involves dynamically changing the CSS styles of each individual character in a given text input. For example, if the user types "Stack" into the input field, I want the 'S' to appear in red, 't' in blue, 'a' ...

javascripthtmlcssvue.js

Ways to display a US map using d3.js with state names positioned outside each state and pointing towards it

Currently, I am working with d3.js and d3-geo to create a map of the USA. My goal is to display the names of some states inside the state boundaries itself, while others should have their names positioned outside the map with lines pointing to the correspo ...

javascriptangulard3.js

Efficiently Loading AJAX URLs using jQuery in Firefox

setInterval(function(){ if(current_url == ''){ window.location.hash = '#!/home'; current_url = window.location.hash.href; } else if(current_url !== window.location){ change_page(window.location.hash.split('#!/&apo ...

javascriptjqueryajaxhashsetinterval

Content in the <core-animation-pages> element is extending beyond the borders of the main DIV when the "slide-from-right" effect is applied (Polymer

Check out this quick video I made to demonstrate the issue: I have successfully incorporated core-animation-pages into my web application. I have three different divs that transition using the slide-from-right animation without any problems. However, in d ...

javascriptpolymercss-animationsweb-component

Issues with padding and margin not displaying correctly at different screen sizes

I'm currently utilizing tailwindCSS and am facing an issue with adjusting the size of buttons based on screen sizes. I want the buttons to appear small with minimal vertical padding on desktop screens, and bigger with increased vertical padding on mob ...

csslaravelvue.jstailwind-css

What is the best way to handle images overflowing a div

I am currently working on creating a carousel using React, where the content images are aligned horizontally. If I have 3 image tags within a div with a width of 1200px, how can I effectively control these images to ensure they fit within the container div ...

cssreactjscarousel

What's the best approach: Backbone-Relational discovery or retrieval?

Although the model caching feature in Backbone-Relational is effective, loading a simple model securely requires considerable code. For example: // Attempt to locate a model in the cache this.model = MyModel.find({id:id}); if(this.model){ // Model re ...

javascriptbackbone.jsbackbone-relational

Struggling to devise a for loop for a JavaScript-generated list

I'm attempting to loop the content of an H1 element through a list 10 times. I seem to have made a mistake in my code and would appreciate any guidance. var headOne = document.createElement("H1"); headOne.textContent = "Hello World"; document.body. ...

javascripthtmlfor-loop

Tips for maintaining the selected radio button state after refreshing the JSP page: Ensuring that the radio button remains selected

I need help with refreshing a page after clicking on one of two radio buttons. I've tried multiple solutions but haven't been successful so far. Can someone assist me? <script> $(document).ready(function() { $(document).on('c ...

javascriptjqueryhtmlspring

Error: Trying to use 'search' before it has been initialized causes a ReferenceError

Every time I run my code, I encounter this reference error but I can't figure out what's causing it. ReferenceError: Cannot access 'search' before initialization App C:/Users/GS66/Desktop/IN20/IFN666/week4/src/App.js:60 57 | 58 | expor ...

javascriptreactjsreferenceerror

What is causing a 500 internal error in Django when using Ajax?

Can someone help me troubleshoot why I keep receiving a 500 internal error when trying to execute an Ajax function? I attempted to send the response from view.py to the Ajax function in two different ways: using JsonResponse (see 'else' section i ...

javascriptpythonjquerydjangoajax

Uploading CSV file in Angular to populate the scope rather than sending it to the server

I need assistance with allowing users to upload a CSV file, which will then be displayed and validated. Rather than uploading the file directly to the server, I would prefer to keep it within scope until validation is complete. Unfortunately, Angular 1.5. ...

javascriptangularjscsv

Grab images from clipboard, encountering blob Error

I'm having issues with copying and pasting images from the clipboard in Chrome. Can someone help me troubleshoot this error? Check out this js fiddle for reference Error Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileR ...

javascriptjqueryhtmlclipboard

Issues with arguments not being identified - Discord.js version 14

After discovering that my arguments are no longer being recognized when executing a command, I encountered a strange issue. When args are not included, my console logs undefined, but if args are added, nothing is logged. This is snippet of my command hand ...

javascriptnode.jsdiscorddiscord.jsbots

Regular expression to validate the proper file naming convention: 1201_17-11-2015.zip

I am looking to verify if a specific file name follows the correct format. Here is the required format: first four numbers_two numbers-two numbers-4 numbers.zip To achieve this, I will need a regular expression. An example of a file name in JavaScript ...

javascriptphpregex

What is the best method for transforming a base64 encoded string into a base64 formatted PDF string?

Could someone please help me with a problem I'm facing? I am utilizing an AngularJS .pdf viewer that displays documents in a modal using base64. Everything works smoothly when the base64 is generated from a .pdf file. The backend (Java) generates th ...

javascriptjavaangularjspdfbase64

The problem arises when Angular's $interval function is not recognized

Despite the possibility of this being considered a duplicate, none of the related topics have provided a solution to my simple date count down directive: class Clock { constructor() { this.restrict = 'AC'; this.replace = true ...

javascriptangularjsdirectiveclock

Is there a way I can ensure the values are loaded when the page loads, rather than displaying NaN?

I've recently created a car rental calculator for a client, and it's almost complete. Everything is working smoothly, from the calculations to the conditions. However, I'm facing an issue where the price isn't calculated on page load. I ...

javascriptphphtmljquerynan

The use of JQuery datatables and the impact on data loading speed

, I have incorporated JQuery datatable to showcase all the projects stored in my database: <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('table.display').dataTable({ "bJQueryUI": tr ...

phpjquerydatatables

Conceal the div on larger screens and display it on mobile devices

I have a fixed navigation bar at the top of my website. By default, it is always visible on all pages, but I want to hide it on desktop screens and display it only on mobile devices. Here is what I have implemented: @media (min-width: 992px) { #sp-he ...

javascriptjqueryhtmlcsshide