Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated.

There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary to maintain the 1:1 aspect ratio. Inside each div, there's a heading that needs to be centered both vertically and horizontally. The wording in the headings may vary in length, sometimes running over two lines, making a simple margin-top adjustment insufficient.

The first issue I'm facing is strange top margins appearing despite no other factors influencing them (or at least none that I can identify). Floating the divs aligns them, but using floating doesn't seem like the right solution. Why is inline-block not producing the desired result?

The second problem (which is likely connected to the first) is the struggle to vertically center the title divs. Any suggestions on how to overcome this?

For further clarity, here's a live example on jsfiddle: http://jsfiddle.net/fydC4/

Below is the HTML code:

<div id="container">
    <div class="nav-left">
    <p id="nav-left-title">In this section&hellip;</p>
        <ul>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
            <li><a class="light" href="#">page title here</a></li>
        </ul>
    </div>

    <div id="main">
        <h1>Assignments</h1>
        <p>Click on the titles of the assignments to find out more.</p>
            <div class="box" id="good-designs">
                <h2 class="box"><a href="#">3 good designs</a></h2>
            </div>

            <div class="box" id="temp">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>

            <div class="box" id="temp2">
                <h2 class="box"><a href="#">title here</a></h2>
            </div>
    </div><!--end main-->
</div>
</div><!--end container-->

The CSS styling for the above HTML snippet :

#container {
    max-width: 960px;
    margin: auto;
}
#main {
    display: table-cell;
    width: 73em;
    padding: 1em 2em 2em;
    background-color: white;
}
#nav-left-title {
    padding-bottom: 0.5em;
    margin: 0;
    color: white;
}
.nav-left{
    display: table-cell;
    width: 14em;
    background-color: #87a8b1;
    padding: 1.1em;
    font-size: 1.2em;
}
.nav-left li {
    padding: 0.5em 0;
    border-bottom: 1px solid white;
}
h2.box {
    padding: 15px 0;
    margin: 50% 15px;
    margin: auto;
    text-transform: uppercase;
    text-align: center;
}
div.box {
    padding: 15px;
    height: 180px;
    width: 180px;
    border-radius: 50%;
    margin-top: 25px;
    margin-left: 1.5em;
    display:inline-block;
    /* float: left; */
}
#good-designs {
    background-color: green;
}
#temp, #temp2 {
    background-color: yellow;
}

Answer №1

Hey there! To align all of your elements, you can make use of two key properties:

vertical-align:middle;

display:inline-table on div.box and 
display:table-cell on h2.box; (for the text within your divs)

Feel free to check out this code snippet for reference: http://jsfiddle.net/fydC4/16/

Answer №2

Success! I found that switching from inline-block to float left did the trick.

I noticed that you were redundantly applying margins to certain elements, which isn't needed. Here's a helpful example: jsfiddle.net/fydC4/14

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

An HTML button generated by a .js file is able to execute a .js function without any issues, but it inadvertently removes all .css styling

Currently grappling with an issue in my JavaScript self-teaching journey that I can't seem to resolve or find examples for. The problem at hand: When the HTML button calls a .js function, it successfully executes the function but also wipes out all C ...

Website errors appear on the hosted page in <body> section without being present in the code

Hello there, I have set up a debug website using my "Olimex ESP-32 POE" to send internal data via JSON, eliminating the need for Serial Output from the Arduino IDE (the reasons behind this are not relevant). #include "Arduino.h" #include <WiF ...

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

Customize Bootstrap 4's .btn-link style to include a smooth transition for under

Recently, I've been working on customizing Bootstrap 4's .btn-link by adding a special hover effect - a line that smoothly transitions from left to right beneath the link when the mouse hovers over it. Although things are mostly going according ...

The functionality of my contact form is non-operational

I have been struggling with my contact form for months, trying various tutorials but still no luck. Please take a look at it here. This time, I followed this tutorial. Here's the code I have on my form from the first link: Contact Form ...

Allow users to edit the textarea only to input values, not from

I am trying to achieve a specific functionality with two input fields and one textarea. Whenever I type something in the input fields, their values are automatically populated in the textarea using .val(). Currently, this feature is working as intended, b ...

Set the value of a static file uploader using jQuery

I am having trouble retrieving the name of an existing file in a file uploader. I have a sample in jsfiddle demonstrating what I have tried. http://jsfiddle.net/shree/a4PKG/3/ However, when I click GetImage, the file uploader always remains empty. T ...

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

What is the best way to limit the size of a table?

I need help figuring out how to limit the number of entries displayed in an SQL table on a webpage to only 10 per table. Is there a way to restrict adding more than 10 items to a table? ...

Is it possible to replace multiple li elements with multiple ul elements within a single ul for better organization?

In the world of HTML and CSS, there are endless possibilities for creating unique designs. Recently, I stumbled upon an interesting question that has been lingering in my mind without a clear answer. Typically, people use a single "ul" element to create a ...

What is the correct way to present the results of a result set in a textbox?

I am having trouble displaying data from the database in a textbox. It seems to be adding new lines and white spaces. Any thoughts on how to fix this issue? Here is the code snippet: <td width="200"> <textarea rows="3" cols="25" style="text-alig ...

Employing PHP to iterate through and separate items into disparate divs

For my project, I need to loop through 12 items and separate them into different divs. Specifically, I want to group 0 and 1 together in one div, have 2 in its own div, 3 and 4 in another div, 5 in a separate div, and so on. <!-- Grouping 0 and 1 --> ...

Incorporating fresh data from a node.js backend to refresh a webpage section

I'm currently working on creating an app that can retrieve the song a user is currently listening to using a web scraper. While I've managed to direct users to the page and display the current song title, they must manually refresh the entire pag ...

The AngularJS templates' use of the ternary operator

Is there a way to implement a ternary operation in AngularJS templates? I am looking for a way to apply conditionals directly in HTML attributes such as classes and styles, without having to create a separate function in the controller. Any suggestions wo ...

Unable to activate/deactivate the form components on a Grails webpage

I have multiple forms and buttons on a single page in my Grails application. What I'm trying to achieve is the ability to hide and show different forms on the page using an enable button with jQuery. I attempted to use ID selectors, but this resulted ...

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

Centered Tailwind CSS logo design

Here is my current fiddle: https://jsfiddle.net/w5c36epd/ Upon close inspection, you may notice that the logo is not properly centered. I have experiment with various flexbox options such as: <div class="flex-shrink-0 justify-center"> ...

Tips for placing modal box in the exact desired position upon loading

I've been searching for a solution on how to dynamically calculate the position of each image loaded in a Twitter modal box and place the box underneath a custom toolbar element I have created. The situation is depicted in the image. The height of the ...

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

Creating CSS style rules for aligning table column headers in JavaFXML

Is it possible to style columns individually in a tableview? I have been attempting to make some column headers left-aligned and others right-aligned, as shown below: | hdr1 | hdr2 | hdr3 | hdr4 | In my css stylesheet, I experimented with the following ...