Aligning container - property: inline-block;

Having trouble centering two divs that are set to "display: inline-block;" in your code? Removing the inline-block class centers them, but they end up stacking vertically instead of horizontally. See below for an example:

#news {
    background-image: url('../img/news.png');
    background-repeat: no-repeat;
    height: 152px;
    width: 320px;
    display: inline-block;
}
#conBody {
    background-image: url('../img/conBody.png');
    background-repeat: no-repeat;
    height: 260px;
    width: 321px;
    margin: 0px auto 0px auto;
    text-align: right;
    display: inline-block;
    padding: 0px;
}

Here is the HTML structure:

<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="conBody">

</div>
<div id="news">

</div>
<div id="news">

</div>
<div id="news">

</div>

This arrangement results in the following layout:

Answer №1

One way to ensure proper alignment of your content is by enclosing it within a wrapper element. By applying the CSS property display: table; to the wrapper, you can easily center the content, even if there is no specified width.

For a live demonstration, check out this link: http://jsfiddle.net/kevinPHPkevin/nXj7c/

Answer №2

To align text, you must utilize the text-align property.

<div class="news-parent">
    <div class="news">
    a
    </div>
    <div class="news">
    b
    </div>
    <div class="news">
    c
    </div>
</div>

.news-parent{
    background: #ccc;
    text-align: center;
}
.news {
    width: 20%;
    display: inline-block;
    background: #666;
    text-align: left;
}

View a live demonstration at this link: http://jsfiddle.net/7KFNR/

Suggestion: refrain from using IDs (#news) - an ID is meant to be unique. In simpler terms, an ID should only appear once on a single page. Employ classes for styling that applies to multiple elements.

Keep in mind: it is crucial to define a width for the div.news elements

Answer №3

To ensure proper alignment, it is recommended to wrap all content within a single div and center it as a whole rather than attempting to center each individual div separately.

CSS can be used to center a block element:

margin: 0 auto;

For a basic demonstration, visit this fiddle: http://jsfiddle.net/nRAyQ/3/

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

Enhance the appearance of the <td> <span> element by incorporating a transition effect when modifying the text

I need help with creating a transition effect for a span element within a table cell. Currently, when a user clicks on the text, it changes from truncated to full size abruptly. I want to achieve a smooth growing/scaling effect instead. You can view an exa ...

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

I am struggling to implement the display: flex style on the parent <div> containing my <span> However, since the <span> is dynamically generated by the ng-template of the ngx-datatable-column, I'm finding it challenging to apply thi ...

Issue with Angular / SCSS where animation is not being executed on the specified element

I have created a post component with a comment section. However, when I click on the comments, I want them to display smoothly with a nice animation effect. Even though I have added the necessary code for animations, it doesn't seem to work as expecte ...

issue with JavaScript canvas

My task is to develop a Blackberry application, but I have limited knowledge in Java. Since the application requires drawing capabilities, I decided to use HTML5 and JavaScript instead. I started reading some JavaScript tutorials to prepare for this proj ...

Transitioning between javascript functions

Having some issues with a switch case statement, also tried using if-else but no luck. In the HTML code: <select onBlur="functionCalc()" id="art"> <option value="hours" id="hours">Hours</option> <option value="minutes" id="mins">M ...

Issue with the first-child selector

Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Struggling to center the links in the navigation bar has been a challenge. I really want those buttons smack dab in the middle of the header bar, but despite trying everything, they stubbornly remain on the left-hand side. .header { overflow: ...

Tips for accurately relocating elements within a tooltip

Currently, I am working on implementing a like model within a Rails application. In order to display which user liked the bonus, I have incorporated foundation tooltip. Below is the code snippet: - avatars = bonus.like_user_avatars.map { |avatar| image_t ...

Aurelia-powered DataTable plugin for effortless data updating

I'm currently utilizing the DataTables and DatePicker plugins along with Aurelia in my project. The goal is for the user to select a date, which will then prompt the data table to display the corresponding data for that specific date. However, I' ...

Recover Checkmark Status from Data

Currently, I am storing form data in json format and encountering an issue when trying to load values from a previously created json file. The plain old JavaScript function provided below successfully loads values into a form from a file, effectively resto ...

What is the process for linking a specific HTML file to a URL?

After preparing all my HTML, CSS, and JS files for upload to a server (I am using cPanel which I have experience with), I found myself wondering how to assign a specific HTML file to a custom link, such as "devwebdevelopment.com/about" I am looking to cre ...

Is there a method to use media queries to dynamically switch JavaScript files based on the user's device?

I've been working on optimizing the mobile layout of my website, and while I have successfully implemented a media query with a different stylesheet for mobile devices, I'm struggling to determine if it's feasible to also load a separate Jav ...

Changing the border of an iframe element using jQuery or Javascript from within the iframe itself

Is it possible to set the border of an iframe to zero from within the iframe itself using JavaScript or jQuery? Any guidance on how this can be achieved would be greatly appreciated. Thank you! ...

Having issues with the input event not triggering when the value is modified using jQuery's val() or JavaScript

When a value of an input field is changed programmatically, the expected input and change events do not trigger. Here's an example scenario: var $input = $('#myinput'); $input.on('input', function() { // Perform this action w ...

Steps to open specifically the WhatsApp application upon clicking a hyperlink, image, or button

I need a code for my HTML website that will open the WhatsApp application when a user clicks on a link, image, or button while viewing the site on a mobile device. Only the WhatsApp application should be opened when a user interacts with a link on my webs ...

Tips for addressing the issue of button flickering due to CSS transitions

Is there a solution to prevent flickering without compromising the intended design? The issue arises when hovering over a moving or animated element and accidentally un-hovering because it moves beneath the cursor. <!DOCTYPE html> <html> &l ...

Loop through an array of buttons using an event listener

My HTML and Javascript code currently have the functionality to show/hide a row of 3 images upon button click. However, I need this feature to work for two additional rows similar to this one. I believe it involves looping through an array of buttons, but ...

The art of analyzing HTML using either jquery or php

I have a question regarding HTML coding. Can anyone help me solve the following example? Here is a snippet of my HTML site: <div> <p><strong>Title 1</strong></p> <p>Content 1</p> <p>Content 2< ...

Having trouble with the image not showing up using the code <img src="">

UPDATE :: I recently discovered that there is a permission error preventing me from accessing images in the images folder. It seems that I do not have the necessary "permission" to retrieve the image files ... * A few days ago, I posted a question regardi ...

Designing the autocomplete dropdown feature in Bootstrap UI

I'm currently developing an app that is utilizing AngularJS and Bootstrap, with the assistance of Bootstrap UI. Specifically, I am working on implementing the typeahead feature. However, I am facing a challenge in trying to ensure that the dropdown li ...