Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top.

/* Footer */
#footer {
    width: 100%;
    height: 400px;
    background-color: red;
    opacity: 0.5;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}
    
.arrange {
    width: 20%;
    height: 80%;
    border: solid 1px black;
    display: inline-block;
    vertical-align: middle;
    background-color: white;
}
<div id="footer">
    <div class="arrange"> </div>
    <div class="arrange"> </div>
    <div class="arrange"> </div>
    <div class="arrange"> </div>
</div>

htmlcss

Answer №1

Give this a shot. Incorporate the following snippet into your code.

display:flex;
justify-content:space-around;
align-items:center;

To arrange your containers next to each other, replace space-around with center.

Answer №2

To achieve the desired vertical alignment, refrain from using vertical-align: middle and opt for the following 3 lines of CSS within the .arrange class instead.

position: relative;
top: 50%;
transform: translateY(-50%);

Your final CSS should look like this:

#footer {
  width: 100%;
  height: 400px;
  background-color: red;
  opacity: 0.5;
  text-align: center;
  font-size: 20px;
  letter-spacing: 35px;
  white-space: nowrap;
  line-height: 12px;
  overflow: hidden;
}
.arrange {
  width: 20%;
  height: 80%;
  border: solid 1px black;
  display: inline-block;
  position: relative;
  top: 50%;
  -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(7deg); /* IE 9 */
  transform: translateY(-50%);
  background-color: white;
}

Answer №3

For an easy fix, simply include a 'padding top' property in the #footer styling and you can eliminate the need for 'vertical-align'

<div id="footer">
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
</div>;

<style>
  #footer {
    padding-top: 90px;
    width: 100%;
    height: 400px;
    background-color: red;
    opacity: 0.5;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
  }
  .arrange {
    width: 20%;
    height: 80%;
    border: solid 1px black;
    display: inline-block;
    background-color: white;
  }
</style>

Answer №4

I have created a solution with detailed annotations to demonstrate one approach to achieve the desired outcome.

* {
  box-sizing: border-box; /* ensuring accurate percentage calculations by excluding border width and padding, while still considering margin */
}
body {
    width: 100vw; 
}
#footer {
    width: 100%;
    height: 400px;
 padding: 40px 5px; /* top padding added based on the requirement for children to be 80% of parent's height - 40 top, 40 bottom */
    background-color: red;
    opacity: 0.5;
    text-align: center;
    line-height: 12px;
    overflow: hidden;
font-size: 0; /* removing ghost spacing after inline blocks */
}

.arrange {
    display: inline-block;
width: calc(25% - 10px); /* adjusting width% - margin */
height: 100%; /* occupying 100% of parent minus parent's padding */
margin: 0px 5px; /* spacing, taken into account in width calculation - 5 left + 5 right = 10 */
font-size: 20px; /* resetting font size */
    border: solid 1px black;
    background-color: white;
vertical-align: top;
}
<div id="footer">
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
  <div class="arrange"></div>
</div>

Check out the fiddle for live demonstration:

https://jsfiddle.net/Hastig/ypfcb2nb/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating the design of mui stepper icon

Is there a way to change the color of this icon from I would like it to be this color: I have tried using .Mui-disabled but it didn't work, not sure if it's .Mui-active or .Mui-completed Here is the sandbox link for reference: https://codesan ...

cssreactjsmaterial-uistepper

Adjusting Spacing Between Characters

I've been looking for a way to convert regular characters (ABC) to full-width characters (ＡＢＣ), but I haven't had any luck so far. That's why I'm turning to you guys for help. Currently, I don't have any JavaScript code writt ...

javascripthtmlcsschar

When the ID and anchor link within a URL fail to scroll to the specified anchor location

I'm trying to add an id to a URL and scroll to an anchor link <a name="tags" id='tags'></a> <a href="edit.php?id=382#tags">GO</a> I have also attempted the following: <a href="edit.php?id=382&#tags">GO& ...

html

The intersection observer fails to detect any new elements or entries that are appended to the page after it has

When I press the "add section" button to create a new section, the intersection observer does not seem to observe it. Even when I try to run the observer again after pressing the button, it still doesn't work. I suspect that I need to reassign the `se ...

javascripthtmlcssarraysintersection-observer

alignment not behaving as anticipated

My goal is to position two elements on different sides within a container. Although in my coding scenario, these elements are meant to be on opposite ends of a div, for the sake of explanation, let's consider them being on opposite sides of the browse ...

htmlcsshtml-tabletext-alignment

What is the best way to pass a variable in PHP and create an HTML link to a specific element ID simultaneously?

Formulating the question may be challenging, but the concept is quite straightforward: I'd like to pass the variable 'count' using GET and simultaneously direct to the media section. On the page http://page.org.mx/comunicados#media I&apo ...

phphtmlhyperlink

Tips for avoiding cursor sticking in css rotate transform in firefox?

I have a unique challenge in this code where I want the user to grab the black square and rotate it around the inner circle. Check out the code snippet here. While attempting to rotate the square, you might notice that the cursor sometimes gets stuck in ...

javascriptjquerycss

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

htmlcssangulartypescriptnebular

Utilizing a JavaScript class method through the onchange attribute triggering

I am facing an issue with a simple class that I have created. I can instantiate it and call the init function without any problems, but I am unable to call another method from the onchange attribute. Below is the code for the class: var ScheduleViewer = ...

javascriptjqueryhtml

The color of the SVG is not visible in the PNG rendition

I have applied a style to an svg image and successfully changed the fill color using a random colors function in JavaScript. However, when I convert the svg to a png format after making these color changes, the PNG file retains the original colors instead ...

javascripthtmlcsssvgcolors

Android Font Icon Spacing Issue with IconFont (Fontastic)

After using Fontastic.me to create an iconfont, I encountered an issue specifically with the native browser of Android 4.2.2 and 4.3 (such as modern Samsung tablets). In these browsers, the characters in the entire font appear to have no width. This proble ...

androidcssicon-fonts

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

javascripthtmljqueryif-statementtext

Display the HTML content retrieved from the SailsJS Controller

Exploring the world of SailsJS, I am on a mission to save HTML content in a database, retrieve it, and display it as rendered HTML. To achieve this goal, I have set up a sails model and a controller. This is what my model looks like: attributes: { ht ...

javascripthtmlnode.jssails.jsejs

Tips for incorporating multiple classes in Material UI by utilizing the classes props

When using the css-in-js technique to apply classes to a react component, how can I add multiple classes? Below is an example of the classes variable: const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap&apo ...

cssreactjsmaterial-designmaterial-uijss

What is the best method for extracting specific information from an HTML webpage?

I am currently working on a project to create an MP3 song fetcher using WPF. The goal is to retrieve all the results from a webpage. However, I'm encountering issues where irrelevant data such as tags and non-downloadable links are being fetched. My ...

c#htmlwpf

Interact with various contenteditable sections by navigating with the arrow keys

I have a challenge with multiple <p contenteditable="true"></p> elements on my page. I am seeking a solution to enable the use of arrow keys to navigate seamlessly across these separate elements as if they were one cohesive editable element. F ...

javascripthtmlcontenteditable

Activate the button solely when the text field has been populated without any spaces

Searching for a solution to my query, but all the suggestions I've encountered don't consider spaces as valid input. In the join function I have, the button should be disabled if the user enters only spaces. A requirement is for actual text inpu ...

javascriptjqueryhtml

Sending an HTML form data to a Node.js server

I'm currently working on a simple project that involves creating a web form and sending it to node.js in order to save the information received. I've been following some YouTube tutorials (https://www.youtube.com/watch?v=rin7gb9kdpk), but I' ...

htmlnode.jsexpresshttppost

Issue with triggering (keyup.enter) in Angular 8 for readonly HTML input elements

My goal is to execute a function when the user presses Enter. By setting this input as readonly, my intention is to prevent the user from changing the value once it has been entered. The value will be populated from a popup triggered by the click attribut ...

javascripthtmlangulartypescript

The margin in the DIV is not aligning correctly with the specified requirements

I encountered a puzzling issue with a small problem, and I am certain that I must be making a mistake somewhere. I experimented with two divs styled using different CSS. <div id="main"> <div id="internal"> hello </div> < ...

htmlcss