Is there a way to horizontally center an item in the middle of another item?
Here is a visual example:
[ . ] (uncentered object = container-1)
[.] (object centered horizontally compared to the one above = container-2)
<div class="container-1"><img src"https://www.shutterstock.com/image-vector/square-grunge-black-example-stamp-260nw-647778754.jpg></div>
<div class="container-2"></div>
To achieve alignment for both elements, consider using a wrapper div to contain them and give both elements margin:auto within the wrapper. You can then apply the necessary alignment styles to the wrapper to position the first container as desired.
Another approach is to use flex display on the wrapper with flex-direction set to column and align-items to center. This way, you can specify the required alignment for the first container in relation to the wrapper class.
/*If you want the first container to be positioned 5px from the left of the window, apply these styles to the wrapper class.*/
.wrapper{
position: absolute;
left: 5px;
}
.container-1{
width: 200px;
height: 100px;
background-color: red;
margin: auto;
}
.container-2{
width: 100px;
height: 50px;
background-color: blue;
margin: auto;
}<div class="wrapper">
<div class="container-1">First Container</div>
<div class="container-2">Second Container</div>
</div>To center the inside div, you can utilize the flex-box property. Simply set the display property to flex and add justify-content:center; in your CSS.
Your HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="container1">
<div class="container2">
</div>
</div>
</body>
</html>
CSS:
.container1
{
display:flex;
justify-content:center;
}
.
wrapper{
display:flex;
justify-content: center;
align-items: center;
}
.container-1{
width: 200px;
height: 100px;
background-color: red;
margin: auto;
}
.container-2{
width: 100px;
height: 50px;
background-color: blue;
margin: auto;
}
<div class="wrapper">
<div class="container-1">First Container</div>
<div class="container-2">Second Container</div>
</div>I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...
I am struggling to center the glyphicon-log-in within the Bootstrap navbar. Currently, it is displaying above the navbar when I try to debug it. <a class="navbar-brand pull-left" href="/"><img src="images/logo.png" alt="Elunika"></a> &l ...
On the webpage, there is a background video set with position: fixed. Below the video, there is a <div> containing the main content. How can I make this content float over the video? Check out my experimental page at oleg-s-fresh-site-8f277a.webfl ...
At the moment, I am using a variable called isNotMobileView passed to the template from the controller as $scope.isNotMobileView: <uib-tabset active="0" vertical="isNotMobileView"> <uib-tab index="0" heading="foo"> ... </uib-tab> ...
My html.php page includes three buttons: "Clear Page," "Retrieve," and "Update Details." Upon opening the form, users can input either a value for id="siteId" or id="siteName". By clicking the "Retrieve" button, the remaining details of a stored site are ...
Is there a way to add a fade effect to my simple pop-up image using CSS? I've tried various transition properties, but nothing seems to work. Any suggestions would be appreciated. Thanks! ...
How do I create a function for my website where I have 5 divs in a container with a width of 20% each? When I click on one div, I want it to expand to 40% while the other divs shrink to 15%. Then, when I click on the expanded div again, it should return to ...
I'm currently working on developing a calendar application but facing some challenges with the layout structure. The main aim is to create a scrollable div featuring timeline overlays. This is my progress so far: .calendar { position: absolu ...
I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...
I'm trying to display YouTube videos on my website using a simple video tag. I've managed to retrieve the encoded url of the video from the page source and successfully download it through IDM, but when I try to use this URL as the source for an ...
Currently, I am encountering challenges while trying to integrate markdown with CSS. The problem I am facing has been replicated in the link provided: https://codesandbox.io/s/react-quilljsbasic-forked-3rcxw?file=/src/App.js ...
My setup includes two monitors: one is 24" and the other is my laptop's 12.5" screen. I have a red box (div) in my web application that displays full height on the larger monitor, but only partially on the smaller one. I'm puzzled as to why it s ...
I am facing a requirement where I need to submit a form containing five records in a table format. Here is how the table looks: https://i.sstatic.net/82ZFM.png This is the code snippet for the form: <form [formGroup]="FeedBack" (ngSubmit)=&q ...
Looking to add a fancy box popup that opens when the user clicks on "CONTACT" in the navigation menu. It's working on JSFiddle at http://jsfiddle.net/88X6D/1/, but strangely it's not functioning in the live environment, as seen at (no action occ ...
My data is structured semantically as shown below: <div class="inputs"> <div class="top"> <h4>Top</h4> <label for="top-1">Label 1</label> <input id="top- ...
Trying to create an animation with two different images once a user reaches a specific point on the page. The animation works, but there is an issue when using a trackpad - the movement appears slow compared to scrolling with a mouse. I've already att ...
http://jsfiddle.net/367ms/1/ I need assistance with my code. My goal is to have a blue border that appears 10 px below the text when hovered over. Additionally, I have a submenu that opens on hover, but it automatically closes when trying to navigate down ...
<a class="nav-link" routerLink="/books" routerLinkActive="active (click)="bookTabIsClicked()" > Books </a> I am currently teaching myself Angular. I need help with disabling this tab when it is active ...
After manipulating the DOM and injecting AJAX content, I often find myself filling in the new content into a copied HTML fragment, then populating it with the updated information before using $().html() to insert the modified code back into the DOM. The ex ...
I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...