My images are still left-aligned to my page when I use align: center.
But when I use display: flex, they all center vertically. I am trying to get them to be horizontal but can't figure out what's affecting them. I'm attempting to center them over the second (pink) box.
Here is a demonstration on how to achieve the design from your image within the existing structure of your HTML. While some parts of your HTML could benefit from more clarity, I have tried to maintain the integrity of your project's structure.
I introduced a wrapper for the long element and another wrapper for the images. The images are now children of the long element. By default, the long element is set as a flex column with items aligned to the center, which helps maintain the height of the image content but may not fully replicate your image.
To align more closely with your image, when the checkbox is checked, I positioned the images absolutely within a relatively positioned parent so that I can anchor them using the bottom and left selectors. Finally, I used translate properties to center them since the left property positions based on the top left corner.
If you have any inquiries, please feel free to ask.
#base {
margin: auto;
width: 1300px;
display: flex;
margin-top: -10px;
margin-bottom: -10px;
}
#left {
width: 260px;
}
#right {
width: 300px;
}
#center {
width: 850px;
background-image: url(https://fancyparts.com/fancyparts/cg/pattern/strip_a/strip_a50.gif);
margin: 0 auto;
height: 40px;
border-radius: 30px;
border: 5px outset #ff8282;
}
#headliner {
height: 20px;
margin-left: 140px;
margin-right: 10px;
}
#navi {
border-width: 8px;
border-style: solid;
border-image: url("") 30 fill round;
width: 170px;
margin-top: 0px;
margin-left: 45px;
}
.centerimage {
width: 50%;
size: 40px;
max-width: 40px;
max-height: 40px;
}
.long-el-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding-top: 1rem;
}
.img-wrap {
display: flex;
}
label {
user-select: none;
}
#absolute-toggle:checked ~ #base .long-el-wrap {
position: relative;
}
#absolute-toggle:checked ~ #base .long-el-wrap .img-wrap {
position: absolute;
bottom: 100%;
left: 50%;
translate: -50% 0;
}<label for="absolute-toggle">
Toggle Absolute Style
</label>
<input type="checkbox" id="absolute-toggle" />
<br />
<br />
<br />
<div id="base">
<div id="left">
<div id="headliner"></div>
<div id="navi">
<div id="titulo">navigate</div>
<button class="buttonA"><a href="(LINK)"> homepage </a> <img src="" width="15"> </button>
<div id="titulo">socials</div>
<button class="buttonA"><a href="(lINK)"> about me </a> <img src="" width="15"> </button>
</div>
</div>
<div class="long-el-wrap">
<div class="img-wrap">
<img src="https://i.postimg.cc/YSp3TDc2/v.gif" style=";" margin-bottom:="" 18px;="" class="centerimage">
<img src="https://i.postimg.cc/jjZXT6KH/i.gif" style="vertical-align: center;" margin-bottom:="" 18px;="" class="centerimage">
</div>
<div id="center">
<div class="border"></div>
<div id="top">
</div>
</div>
</div>
</div>
<div id="right">
</div>Imagine an image as a default inline element, similar to a word within a sentence. Just like you can't center a single word, you can't directly center an image either. However, you can achieve the desired centered effect by placing the image inside a div or p wrapper and styling the wrapper with text-align: center.
If you want to align images horizontally while maintaining their left alignment, mastering CSS Flexbox is the key. Utilize attributes like justify-content and align-items within your container (#base). Be sure to double-check for any conflicting styles applied to your images. Having a solid grasp of Flexbox will make resolving similar layout issues a breeze.
(revision): Additionally, it's recommended to use external CSS. Look into how to implement external CSS for best practices.
Looking for advice on how to add a filter to my jQuery datatable column that contains checkboxes. I want the filter to be a drop-down menu with options for "checked" and "unchecked", so that when a user selects one of these options, only the rows contain ...
I am struggling to effectively implement a navbar on my website. I currently have the following code snippet in the body section of my base.html file. (Should the navbar be placed in the head section instead?) <body> <div class="row" ...
I seem to be encountering an issue with a website I uploaded for testing. Everything appears to be working correctly when checked locally in Dreamweaver CS6. However, once the site is uploaded, some issues arise. When hovering over the images, a problem is ...
I am working on a program where I have created an array and now want to display all the words that contain more than 4 letters. Check out my code snippet below: function oppC(){ var ord = ["Apple", "Two", "Yesterday", "mother", "lol", "car", "co ...
I am encountering an issue when trying to access this specific website on my desktop browser. The site has a responsive/fluid design that switches to displaying a mobile menu button instead of a horizontal nav-bar when the browser width is less than 990px. ...
Just starting out with bootstrap and trying to figure out how to make one text box larger than the others. See my code below: <div class="row"> <div class="col-md-2"> <mat-form-field > <input matInput pla ...
I'm a beginner and I'm trying to enhance this code by adding some extra features. When the form is submitted, I want the page to redirect to an external URL like www.google.com The checkbox should be automatically checked and when the client re ...
I recently started taking a YouTube Javascript course on chapter 34 titled "Make start button work" Javascript tutorial My HTML, CSS, and Javascript files are all located in the same folder. I am using VS Code along with the Live Server extension for codi ...
I have been working on creating a unique wall feature for my website, inspired by Facebook. My aim is to allow users to submit form data and have it validated before storing it in a database. Additionally, I want this stored data to be displayed in a desig ...
I am attempting to apply multiple styles to an accordion group using the ng-style directive since ng-class is not compatible with accordions. Here is my current implementation: ng-style="{ border: ivrMessageForm.ivr_messagetitle.$error.required && ...
Can CSS 2.1 be used to achieve horizontal overflow only? overflow: auto; If this code will result in both vertical and horizontal scrollbars for a block element, is there a way to display only horizontal scrollbars (for example, within a <div>)? Ho ...
Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...
I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...
click here to see imageIs there a way to make that bar disappear once the user clicks "I agree"? I've searched through Bootstrap documentation but couldn't find a solution. Please assist. Below is the code snippet: <div id="cookie-message" cl ...
Recently, I created a page that prints data from a SQL server. In addition, I developed an edit page (edit.php) where users can modify individual lines by entering new information into a textbox and submitting it for updating in the database. My current o ...
I am looking to align the content of a div element in a single row while dealing with an unknown width of the ul element due to varying child li elements. The h2 will always take up the remaining space, and each li element has a width of 20px. The desired ...
Having a JavaScript code that calculates the total price based on radio/checkbox selection. JQUERY var price = 0; $('.price-input').click(function () { if ($(this).is(":checked")) { price += parseInt($(this).attr("data-price"), 10); ...
I've encountered a peculiar bug while trying to add a class to a ui-router element. When I apply the active class, an absolutely positioned element that spans the entire view suddenly snaps to the width of its parent. To see the issue in action, chec ...
I am attempting to create a circular button with a unique border effect. Here is the code I have implemented so far: body { display: flex; height: 100vh; overflow: hidden; justify-content: center; align-items: center; } button { height: 80px ...
My goal is to achieve the following design: https://i.stack.imgur.com/YLUtN.png Currently, I have attempted the following approach (although it doesn't fully meet my requirements): .parent { max-height: 40px; display: flex; flex-wrap: wrap; ...