To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue?

Check out this example on jsFiddle

Here is the HTML code:

<div class="container">
 <div class="wrap">
    <div class="center" >
            Text that should be centered      
    </div>
 </div>
</div>

And here is the CSS code:

.container {
position: relative;
width: 300px;
height: 400px;
border:solid;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}

.wrap {
height: 800px;
width: 100%;
position: relative;
text-align: center;
}

.center{
background: red;
position:  fixed;
bottom: 100px;
width: inherit;  
}

Answer №1

adjust the width of .wrap:

.wrap {
    height: 800px;
    width: auto;
    position: relative;
    text-align: center;
}

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

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...

When I employ ngroute, the Angular section in the html page does not display

I am looking to implement a fixed menu named "fixed_admin.html" on my website: <!DOCTYPE html> <!-- saved from url=(0069)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/ --> <html lang="en"><head><meta htt ...

Top method for converting scrolling into an element

When trying to create a scrollable element, I attempted the following: .scroll-content { overflow: hidden; } .scrollabe { overflow-y: scroll; } <ion-content> <ion-grid style="height:100%" *ngIf="plat && ticket"& ...

Is it possible to use AngularDart's ng-repeat directive in HTML tables

I've been struggling to iterate over lists with sublists and display them as <tr> elements without much luck. The following code represents what I'm trying to achieve: <table> <tr> <th>1</th> <th>2& ...

Deactivate the BACKSPACE button

Similar Question: How to disable backspace except textbox using jQuery I am looking for a solution to prevent the BACKSPACE button from functioning unless it is within a TEXT field. Although I have tried the code below, it ends up disabling the backs ...

What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone ple ...

Prevent users from selecting an option depending on a specific criteria

I need help with disabling select options based on specific time instances. For example, I want the user to provide specifications by 6:00 am in order to use the system at 10:00 am, ensuring there is a 4-hour gap between the two times. So, after 6:00 am, t ...

How can I specifically target and count children from a certain class using CSS selectors?

Consider this HTML structure with items arranged at the same level: <div class="h2">Title: Colors</div> <div class="pair">Hello world (1)</div> <div class="pair">Hello world (2)</div> <div class="pair">Hello wo ...

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

Customizing the navbar to be inverse on each webpage using CSS, PHP, and Bootstrap

Dealing with a Bootstrap navbar across multiple pages on my website is becoming a hassle. Every time I need to make a change, I find myself jumping from one page to another just to update it. My objective is to have the ability to edit the navbar in one ce ...

Is it possible to have the Target='_blank' attribute open the link in a new window instead of a new tab?

Is there a way to achieve this? When using Firefox, the link opens in a new tab, which I prefer to avoid users having to adjust settings in their browsers. I am looking for a solution where a pop-up contact form appears whenever a user clicks on 'co ...

Hiding elements with CSS using the display:none property and using the :

Trying to display an image when hovering over another image. Works well in Safari, but Chrome and Firefox fail to load the image properly. Have searched for solutions related to visibility:hidden but none seem to solve this cross-browser issue. HTML being ...

Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser: https://i.sstatic.net/YMf5L.png The color appears different, even though the code remains the same. <svg id="Layer_2" data-name ...

Tips for linking the search button to the corresponding input field in Angular

I'm working on a form that dynamically generates input fields using a for loop. Each input field has a corresponding search button. When a search button is clicked, it triggers a method to execute on all input fields. How can I make sure that the sear ...

Utilize the controller data to display information on a day-by-day basis

In my attempt to design a weekly calendar using AngularJS, I am facing challenges when it comes to inserting events into the 7 boxes representing each day of the week on the calendar. The current HTML structure is as follows: <div class="week"> ...

Preventing links from functioning on dynamically generated web pages

I have implemented the following code to deactivate all links on a preview page: var disableLink = function(){ return false;}; $('a').bind('click', disableLink); While this successfully disables all static links, any anchor tags loade ...

django-avatar // insufficient amount of values for decomposition (anticipated 2, received 1)

Visit the Django Avatar documentation here Encountering an error in Django stating "not enough values to unpack (Expected 2, got 1) while attempting to open a specific html template: {% extends 'base.html' %} {% load account %} {% load avatar_ta ...

Upon loading, the Carousel is visible instead of being hidden, which is contrary to its intended behavior

Any help would be greatly appreciated as I am struggling with creating a web page featuring tabs for "London, New York, Shanghai". The initial page displayed is the "welcome" page with the other tabs hidden on load. I successfully implemented a carousel f ...

There is a lack of CSS import in the HTML document

I have organized my files in the following structure: - index.html - css/styles.css This is the HTML code I am using: <!DOCTYPE html> <html lang="en> <head> <title>Bootstrap Case</title> <meta charset="utf-8"> & ...

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Struggling to fit my content within a Material UI container in a React project, but it's creating odd margins. Check out the current look: https://i.stack.imgur.com/TaQs2.png Here's how I want it to display with full width: https://i.stack.imgur ...