Using CSS margins for elements lacking specific widths

Is there a way to centrally align a div element that doesn't have a set width?

<html>
<head>
    <title></title>
    <style type="text/css">
    .outer {
        padding: 10px;
        /*margin: auto; (doesn´t work)*/
        background-color: #000;
        display: inline-block;
    }
    .inner {
        width: 400px;
        height: 400px;
        text-align: center;
        background-color: #CCC;
    }
    </style>
</head>
<body>

    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

Are there any solutions that don't involve setting a specific width?

Answer №1

You have the option to apply this to either the body or .outer element

By using these CSS properties, you can effectively center your div both horizontally and vertically.

position: absolute; 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Answer №2

To achieve horizontal alignment in a relative parent element, follow these steps:

   .align-center {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px;
        background-color: #000;
        display: inline-block;
    }

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

Is there a way to showcase the search outcomes of employee information stored in my text document using PHP?

i was tasked with creating a PHP file that could search for an employee's ID number and display the results on the same page from a text file. The expected output should look like this: Expected Output (results on the same page): Search Employee Rec ...

Is there a way to do HTML select-option in a reversed order?

Having an issue with my HTML select element: <select> <option>...</option> <option>...</option> <option>...</option> </select> Currently, all the options are displayed below the select field. I ...

Use jQuery to apply CSS to a div only when it becomes visible on the screen

I created a single page HTML with scrolling functionality. The structure of my divs - home and home2 - is as shown below. Both have a height of 100%. I am looking to add CSS to the second div (home2) using jQuery only when it becomes visible to the user in ...

What is the best way to use appendChild within an AJAX get function to manipulate the DOM

I've been working on a code function where I try to append a list item (li) into the HTML received in 'msg', but it's not functioning properly. Any ideas why? function handleFileSelect(evt) { var files = evt.target.files; $(&ap ...

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

The UnboundLocalError occurred when trying to access the local variable 'playlist' before it was assigned

Below is the content of my views.py: def create_playlist(request): form = PlaylistForm(request.POST or None) if form.is_valid(): playlist = form.save(commit=False) playlist.name = request.name context={ 'pl ...

"Want to know the best way to retrieve the most recent form input value using jQuery or Javascript

I've been reading a lot about using jQuery to set and get field values, but I'm encountering an issue where I can't retrieve the value after submitting, editing it in an input field, and then submitting again. It works the first time, but no ...

Ensure that the element is positioned above other elements, yet below the clickable area

Currently, I am working on developing a notification system that will display a small box in the top right corner of the screen. However, I am facing an issue where the area underneath the notification is not clickable. Is there a way to make this part o ...

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

Is there a way to customize the CSS for a single blog post and add a 5-star rating system without affecting other posts?

After launching my blog on Google's Blogger, I wanted to add a unique touch by incorporating a static 5-star rating system in my Books I Read Section. I thought about using CSS to customize each book post and display anywhere from 1 to 5 stars for vis ...

Implement various class versions tailored specifically for mobile browsers

While editing a Wordpress theme, I decided to include a content box within Bootstrap's <div class="well">. However, I soon encountered an issue where there was excess space in the content box on desktop view. To address this, I removed the paddi ...

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

Issue with form submission using getElementById

I am struggling to submit a form that is generated by PHP echo. The getElementById function doesn't seem to be functioning properly. <?php include 'connect.php' ; $sql=mysql_query("SELECT mess_id,receiver,subject ...

file_put_contents - store user-defined variables

When I execute this script, it successfully generates the html page as expected. However, I am encountering challenges in incorporating variables, such as the $_GET request. The content is enclosed in speech marks and sent to a new webpage on my site usin ...

initiate changes to the application's style from a component nested within the app

I'm looking to update the background color of the entire page, including the app-nav-bar, when I'm inside a child component. When I navigate away from that component, I want the default style to be restored. Any suggestions on how to achieve this ...

Library with integrated Jquery functionalities

Hello again with another query. I recently came across a jQuery code that allows you to click on an entire table row (tr) to show/hide other rows (specified as .none). I managed to find the code and it works perfectly on JSFiddle. However, when I try to im ...

HTML: Align DIV contents next to each other without any overlap

Below are three boxes displayed. Boxes 1 and 3 appear fine, but in box 2 the text content is overlapping. The issue lies with the <div> having the class .vertical_center.grade_info which has a specific margin-left of 100px, causing the overlap. I ne ...

The web form response fails to show any content beyond a space character when viewed on the console

I'm facing a new issue and need some assistance to resolve it. I have successfully extracted information from a form and stored it in a database. However, I've noticed that when I display the data on the console, parts of the information get cut ...

The production build for Angular 9 Keyvalues pipe fails to compile

After successfully running my app on the development server with ng serve, I encountered a failure when trying to build it for production. The error message that popped up was: ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of typ ...

What is the reason for the presence of "e034" in CSS not resulting in the creation of a tick icon?

Here is the CSS code I am using: <style> .icons:before { content: "\e034"; color: #00bc9b; font-size: 16px; margin-top: -1px; margin-left: -1px } </style& ...