Is it possible to center the left side (left border) of a child div within its parent div?
I tried using left: 50% in the CSS for the child div, but it doesn't seem to be working. Can anyone explain why?
<div id="outher">
<div id="inner">
</div>
</div>
CSS:
#outher {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#inner {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
}
Check out the demo here
To achieve the desired layout, make sure to specify either absolute or relative for the position property:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
When using CSS, the left property only functions with positioned elements.
Possible values: <length> | <percentage> | auto | inherit
Initial value: auto
Applies to: positioned elements
Inherited: No
For example:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Recommendations for further reading:
To achieve absolute positioning in CSS, it is essential to include the rule position: absolute;. The left property plays a crucial role in positioning elements absolutely.
In your specific scenario:
#inner {
width: 400px;
height: 300px;
background-color: #090;
position: absolute;
left: 50%;
}
Try:
padding-right: 50%;
Alternatively:
position:absolute;
right:50%;
Give this a shot:
HTML Section :
<div id="container">
<div id="box">
</div>
</div>
CSS Section :
#container {
width: 1000px;
height: 1000px;
background-color: #ccc;
}
#box {
width: 400px;
height: 300px;
background-color: #090;
left: 50%;
margin: 0 auto;
position: absolute;
}
This solution should assist you in overcoming your issue.
I have an input field similar to the one shown below: <input type ="number" id="numberTxt" placeholder="Number Only"/> To ensure that the value entered is a number, I am using the following function with the keypress event: <script> ...
Instead of overwhelming you with code, I'll just share a link to the types of animations I've come across so far. Although these options are close to what I'm looking for, none of them are exactly right. The one that comes closest to my vis ...
Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...
I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...
While attempting to create a wave effect on an image, I hit a roadblock. There are two SVGs involved - one with the path I want to use and the other behaving as expected but with the wrong clip path/shape. However, when I try to insert the desired path, ...
Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...
Having trouble grasping the concept of table and table-cell in css? See this example: http://jsfiddle.net/dd7h7/3/. HTML <div class="widget"> <div class="button"> <div class="content"> <div class="icon">A</div> ...
Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...
I'm encountering issues fetching data from an external JSON file for a specific variable. I suspect that the problem lies in using Vue.js within the HTML, as it seems to be having trouble interpreting my code correctly.:joy: jsfiddle Additionally, I ...
How can I move the scrollbar to the left while keeping ng-repeat population from left to right? I'm using an ng-repeat to fill a grid that is 3 by X (Width by height). By default, the scroll bar appears on the right side. I want to position it on the ...
I've been creating a series of slides with questions, and the final slide serves as a summary of the previously answered questions. I want to ensure that the submit button is always visible at the bottom of this last slide. However, I've encounte ...
As I work on developing a web application with Angular, my goal is to create a grid layout that organizes items by category. Each row will represent a different category. Below is an example of the code structure I have in place: <ion-item ng-repeat="i ...
As I embark on creating my very first WordPress website using the Blossom Pin Pro theme, I'm encountering an issue where the background image of the header disappears when adjusting the window width. Click here to visit the site If you have a code s ...
Here is an example of the HTML code I am working with: <td value='3' style='text-align: center'> <select class='selection' onchange=''> <option value='1'>1</option> <opti ...
As a novice in UI development, I am currently trying to export HTML content to PDF using the JSPDF library. However, I have encountered difficulties in generating the PDF in A4 size landscape mode. The HTML code includes data with charts (canvasjs/chartjs) ...
Looking for help with switching content using pure CSS. I'm not very skilled with CSS and would prefer to avoid using JavaScript if possible. Any assistance would be greatly appreciated. Below is a snippet of the code: If A is clicked, toggle-on-con ...
Currently facing an issue with Swiper Slider and Simple Parallax Scrolling. Whenever I switch slides, the same image is displayed repeatedly. I suspect the problem lies in the fixed position of the image within the parallax effect. Attempted to resolve b ...
In my angular 6 project, I am trying to limit the display to just five rows in a table using ngFor. My current code snippet is as follows: <tbody> <tr *ngFor="let item of routines; let i = index"> <td style="display: none"> ...
I have been working on creating a hover effect for a list of items where an underline emerges from the center. While I have done something similar in the past, there seems to be an issue preventing it from working properly this time. I have included the HT ...
Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...