How can I horizontally center an element on a page with a margin of 100px on both the left and right if the viewport gets smaller? Do I need to use a parent container for this layout?
margin: 0 auto;
margin-left: 100px;
margin-right: 100px;
How can I horizontally center an element on a page with a margin of 100px on both the left and right if the viewport gets smaller? Do I need to use a parent container for this layout?
margin: 0 auto;
margin-left: 100px;
margin-right: 100px;
one issue with using auto is that it cannot be combined with calc(auto + 100px)
for a more effective and precise approach, consider utilizing flex
by employing the justify-content property, you can center your element similar to margin: 0 auto; while still having flexibility with margin
.parent{
height: 200px;
background: gray;
display:flex;
justify-content:center; /*center element*/
}
.child{
height: 100px;
width: 200px;
background: yellow;
margin: 0 100px; /*adding margin*/
}<div class='parent'>
<div class="child"></div>
</div>To create a border on both the left and right sides of an element, you can utilize the border-left and border-right properties. Ensure that the border color is set to transparent and include background-clip: padding-box to ensure the border remains invisible:
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
background-clip: padding-box;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}<div class="centered"></div>Alternatively, you can add padding to a parent element as another method:
.parent {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}<div class="parent">
<div class="centered"></div>
</div>In some cases, you might be able to use the <body> element itself as the parent, eliminating the need for an extra parent element:
body {
padding: 0 100px;
}
.centered {
margin: 0 auto;
width: 100px;
height: 100px;
background: blue;
}<div class="centered"></div>To achieve this effect, consider utilizing padding
I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...
Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...
Here is the style I am working with: .main-panel{ height: 100%; display: grid; grid-template-rows: 4rem auto; grid-template-columns: 14rem auto; grid-template-areas: 'header header''sidebar body'; } I want to know how to cha ...
I decided to create my own version of the Google Maps icon using Photoshop, and now I want to replace the current image with my duplicate when the link that wraps around both is hovered over. To achieve this, I used the position: absolute property to layer ...
If you are looking to utilize the object-fit CSS rule, keep in mind that it is not supported in MSIE and MS Edge Browsers. While there are polyfills available for IE, none of them seem to work in Edge from my experience. For instance, the polyfill fitie b ...
The Bootstrap 3 Navbar expands properly in full screen and on a browser with a small width on a desktop PC and mobile browsers, but when using the Toggle navigation button, it doesn't slide down. I have tried to replicate the code from this example: h ...
I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application: <body> <div id="root"> ...
My web page has a background image set using this CSS: body, html { background-image: url(Content/Images/bg-lounge-2-l.jpg); background-repeat: repeat; background-attachment: fixed; /*background-position: 0 -390px;*/ } ...
I'm currently facing an issue with displaying a CSS grid on my page. When viewed on desktop, the grid appears stacked up instead of in separate columns. I've tried various methods like dividing it into 4 columns and using spans for width but noth ...
Trying to achieve something that I assumed would be straightforward, but CSS always has its surprises! The issue I'm facing is with an image floated to the left. Next to the image, I have a title, and below the title, but still alongside the image, I ...
I am struggling with changing the background color of my input[type="file"]. Despite researching similar issues, none of the solutions I found helped resolve my problem. I am hopeful that someone here can provide some assistance. Below is the snippet from ...
https://i.stack.imgur.com/HmziN.png The image above showcases the desired effect I am aiming for. It is important to note that the width of the container div may vary. The child elements should have consistent spacing between each other as well as the le ...
Recently, I integrated Primeng p-table with a filter and frozen column feature (with one column being fixed while the others are movable). However, I encountered an issue with the select dropdown in the header. When I try to open the dropdown, the values a ...
Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...
Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...
I am experiencing an issue where the span elements in my button groups are not aligning properly. I am looking for a way to align these span elements within the button groups without using fixed widths. Creating a basic web modal with Bootstrap 5 <di ...
I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead. Although I checked the Buttons Less variables, I couldn't find an option specifically ...
I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...
I have a scenario where I need to display 2 modals (box1 and box2) in my code with box2 appearing on top of box1. Each modal has its own button, and I want to make sure that box1 appears first. Then, when the user clicks the button in box1, it transitions ...
I have been searching for a clear answer to my query, but haven't found one yet. In my HTML script, I have nested divs structured like this: <ul id="navbar"> <li><a href='#' class='dropdown'>Rules</a> ...