I am facing an issue with centering and vertically aligning a div inside another div. Despite setting the CSS properties, it doesn't seem to work properly. Can you please review my code below:
#outer {
border: 1px solid black;
height: 500px;
}
#inner {
border: 1px solid black;
display: inline;
vertical-align: bottom;
margin: 0 auto;
}<div id = 'outer'>
<div id = 'inner'> inner </div>
</div>To centrally align the inline div, you can utilize text-align:center, followed by absolute or fixed positioning for the inner div with a relative position on the outer div to anchor it at the bottom:
#outer {
border: 1px solid black;
height: 500px;
text-align:center;
position:relative;
}
#inner {
border: 1px solid black;
display: inline;
margin: 0 auto;
position:absolute;
bottom:0
}<div id = 'outer'>
<div id = 'inner'> inner </div>
</div>MODIFY
You could enclose the content within another element and apply margin:0 auto on an inline or inline-block style:
#outer {
border: 1px solid black;
height: 500px;
text-align:center;
position:relative;
}
#inner {
width:100%;
position:absolute;
bottom: 0;
}
#innerContent{
border: 1px solid black;
display:inline-block;
margin:0 auto;
}<div id = 'outer'>
<div id = 'inner'>
<div id='innerContent'>hesisaveylongstringloremipsum<br>
<input type='submit'>
</div>
</div>
</div>Here's an alternative solution using the transform property instead of relying on text-align:center to center text within the outer div and avoiding the use of margin:0 auto; in the inner div.
#outer {
border: 1px solid black;
height: 500px;
position:relative;
}
#inner {
border: 1px solid black;
display: inline;
position:absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
}<div id = 'outer'>
<div id = 'inner'> <input type = 'submit' value = 'Submit something'> </div>
</div>I am facing an issue with my code. I want to display three cards in a row, and when each card is clicked, the accordion body should appear in the bottom row. However, in the first and second cards, this is not happening because the horizontal-accordion div ...
Using @for to generate multiple box-shadow arguments: .myclass { $bxsw : ""; @for $i from 1 through 10 { $bxsw : $bxsw + " -" + $i + "px -" + $i + "px " + brown + ","; } box-shadow: #{$bxsw}; } This results in: .myclass { bo ...
I had a previous experience where I had to programmatically open a modal. Take a look at this snippet of code that represents the modal: <div class="modal fade" id="messageModal" tabindex="-1" role="dialog">< ...
Is it possible to customize the text color while typing email in an input field? <form action=""> <input type="email" name="mail" id="" placeholder="Your Email"& ...
I recently added a like button to my website, but when I click to publish, the post does not appear on my Wall. Can anyone help me figure out why this is happening? Here is the HTML code for my button: <div class="fb-like" data-send="false" data-layout ...
I am looking to implement an image slider that can be updated by the admin using php and mysqli. The admin should have the ability to easily add or remove images as needed. ...
Trying to create a menu using ul HTML, but encountering an issue. When the website is opened, the menu shows up by default, whereas I only want it to appear when a mouse hovers over it. Even after attempting to change the CSS class, the desired functionali ...
Is there a way to showcase the <blockquote> element in a unique color without it tightly enveloping the text? I tried using the background-color CSS property, but unfortunately, the colored box of the <blockquote> element ended up fitting too c ...
After struggling for days without success, I find myself once again seeking your help. The current issue revolves around the slideshow on THIS website, which is powered by the jQuery Infinite Carousel Plugin. Despite adding background-size: auto 100%; to ...
I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...
Hello Overflowers, I've designed an HTML page with the following specifications: 1. Resetting HTML, BODY, DIVs, and SPANs to have no border, padding, margin, or outline 2. Setting display properties for HTML, BODY, and DIV elements 3. Defining hei ...
Currently, I have an Angular template code that displays the header on the left and data on the right in a top to bottom layout. <div class="panel-body"> <table class="table table-striped"> <tr ng-repeat="f in fields"&g ...
My webpage is designed using bootstrap 4 and showcases images of our team members along with accordion functionality to display bios upon clicking the image. On a desktop screen, everything functions smoothly with four images of team members displayed in ...
Currently facing an issue where three separate images are being transformed using CSS3 upon hover. Various attempts have been made, including placing them in divs, a table, or just plain images. Trying to float them all in one direction, with #1 left, #3 ...
Having some trouble with my HTML report created from RMarkdown and applying CSS. The browser version displays correctly, but when printed, the styling doesn't come through. Below is an example of the RMarkdown code: --- title: "Table" output: html_ ...
const homeButton = document.getElementById('home'); window.myInterval = 0; const showHome = () => { console.log('showHome'); window.myInterval = setInterval(wait, 400) } const wait = () => { console.log('wait'); ...
This snippet represents the HTML for a specific table row that I am not interested in: <tr class="items" data-href="#" style="display: none;"> On the other hand, here is the one that I actually want to extract: <tr c ...
In my web application, I have a tree that utilizes fancytree. Everything is functioning properly, except for the fact that I need to set the font color to red for certain nodes. I have implemented the use of extraClasses in my JSON, which is successfully a ...
Currently, I am working on implementing the ui bootstrap collapse feature. The static single or double collapse system works perfectly fine, but for my specific design requirements, I need to create collapses using ng-repeat. Unfortunately, I am unsure how ...
As I work on updating an old application with Bootstrap styling, one challenge that keeps arising is how to style an asp:DropDownList to look like a Bootstrap dropdown. I found a helpful Stack Overflow post suggesting the use of the form-control class. Wh ...