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

Set the jQuery cookie to change the CSS property to hide the element

Currently, I am utilizing the jquery cookie plugin to make the browser remember the state of a CSS after refreshing the page. Below is an excerpt of my code where a button is clicked: $('#cartHolder').attr('style','display: no ...

jquerycssdomcookies

Issue with rendering SVG <g> element in Backbone view

I'm currently developing an application with Backbone and running into issues with a view where the "el" property is a dynamically created <g> element. Here's the code snippet for the view: var DependencyLineView = Backbone.View.extend({ ...

javascriptjqueryhtmlbackbone.jssvg

Responsive left and right image styling in CSS and HTML

I have designed a landing page with fixed left and right images and content in the middle. It looks fine on desktop view, but on mobile view, the images are overlapping the content. How can I resolve this issue? <div class=" ...

javascriptphphtmlcsslaravel

"960-css: Building a Unique Framework for Sty

Considering the 960 gs CSS framework for implementation on my website. Is there any notable company utilizing this framework for their websites? Appreciate any insights. ...

htmlcssframeworks

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

jqueryhtml

Trim the edges of a photo and add the Kinetic filter

Currently, I am utilizing Kinetic for image processing purposes. The issue arises when I crop an image and then attempt to convert it to black and white by clicking a button. Unfortunately, the straightforward setFilter function does not seem to work in th ...

htmlfilterkineticjscropputimagedata

Diagram with Cascading Style Sheets and Hypertext Markup Language

As I work on creating a flowchart, here is the code that I have developed: #flowchart { width: 580px; text-align: center; font-family: sans-serif; font-size: .8em; margin: auto; } #flowchart a { ...

htmlcssrounded-cornersflowcharthtml-heading

Jquery Error in Bootstrap and DataTables Integration

My knowledge of frontend coding is limited, so please bear with me. Initially, my website was using MVCContrib grid along with its own CSS style. Recently, I switched to Bootstrap which caused MVCContrib to stop working. I've been struggling to integ ...

csstwitter-bootstrapdatatables

I tried moving the onchange(this) function from HTML to JavaScript, but I seem to have missed a parameter. The code ends

I'm currently building a website for a fictional ice cream shop to enhance my JavaScript skills. function hideAAndB() { var pickupDiv = document.getElementById("pickupDiv"); var deliveryDiv = document.getElementById("deliveryDiv"); pickupDi ...

javascripthtmldomparameters

Tips for embedding a file within a text box in HTML and enabling users to make direct edits

I am currently working on a feature that allows users to open a .txt or .html file from their file explorer and paste the contents into a textarea for editing and saving purposes. My question is whether it's possible to read the file content and auto ...

javascripthtmljquerycss

Ways to design siblings that are not currently being hovered over

Is there a way to achieve an effect where hovering over one list item causes all other list items to fade out? I'm searching for a method to style an element that is not being hovered, when one of its siblings is in the hovered state. I've trie ...

htmlcss

What steps can I take to ensure that it is responsive?

I recently purchased this template and am currently editing it. It utilizes bootstrap, however, I seem to be encountering an issue with the sizing of an image on different monitors. I attempted to add: .responsive {width: auto; height: auto;} to resolve ...

cssimageresponsive

Can the <article> tag and all its content be positioned in the center of the webpage?

Can the <article> and its content remain centrally aligned on the page? Check out my website here: Typically, when you visit a website, the article is positioned in the center of the page. However, in my case, the article only remains centered when ...

csshtml

Tips for creating a responsive HTML5 form

I am trying to center and make my form responsive. Can you help me achieve that with the code below? HTML5 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...

csshtml

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Is there a way to have the submit button show the uploaded file on the same page, without redirecting to a new

My code seems to be malfunctioning and I suspect it's due to some errors. I'm attempting to have the submit button display an image of a molecule using JSmol. Can anyone lend a hand with this? <script> var Molecule = { width: 550, ...

javascriptjqueryhtmlajax

List formatted in a table

Can a list be inserted into a table using markdown? I attempted to research this but came up empty-handed. An example of a Table: Fruit |Color ---------|---------- Apples |Red Pears |Green and an example of a list: List item 1 List item 2 ...

htmlmarkdown

Issues with CSS styling are affecting the display of a form

Hey there! I was working on creating an order form for my website, and everything was going smoothly until I hit a snag while styling the webpage. The problem is that the legends of the form are extending all the way to the right side of the page, and the ...

css

What is the best way to make a block fill 100% of a container-fluid?

Here is a block: <div class="container-fluid"> <div class="content_wrapper"> </div> </div> What's the best way to display the .content_wrapper block with 100% content width and margins from the body borders? ...

htmlcss

JQuery HTML form validation continues to send emails even when there are blank entries

I've set up an HTML form with three required fields, and I'm trying to prevent the form from submitting an AJAX call if those fields are left empty. $("#contact").submit(function(e){ e.preventDefault(); var ajaxurl = '<?php echo ...

javascriptphpjqueryhtmlforms