Aligning multiple divisions within a single division

Is there a way to center three divs both horizontally and vertically within another div without using flexbox? I have tried using flexbox, but it ends up shrinking the new divs. Any suggestions on how to achieve vertical centering?

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  width: 100vw;
  height: 100vh; 
  text-align: center;
}

.item {
    width: 250px;
    height: 350px;
    background: red;
    margin: 50px;
    display: inline-block;
}
htmlcss

Answer №1

You can still achieve perfect center alignment by adjusting it up half of its height after moving it down halfway:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Latest Update: ( H taking Priority ) :

html, body {
    height: 100%;
}
.hero {
    text-align: center;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.box {
    width: 250px;
    height: 350px;
    background: red;
    margin: 5px;
    top: 50%;
    position: relative;
    display: inline-block;
}

Answer №2

html,body,div,table-cell{
width:100%;
padding:0;
border:0;
}

.hero {
  width: 100vw;
  height: 100vh;        
    display:table-cell;
    vertical-align:middle;
}

#a{
margin:0 auto;
display:block;
width:750px;
}

.box {
    width: 250px;
    height: 50vh;
    background: red; 
    display:inline-block;
    box-sizing:border-box;
    border:3px solid black;
     
    
    
    
   }
<div class="hero">
  <div id='a'>
     <div class="box"></div
     ><div class="box"></div
     ><div class="box"></div>
 </div>
</div>

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

How to use Bootstrap 5 to position a bottom div element inside another div element

I am trying to display three cards side by side, with the orange part containing the icon always at the bottom. How can I achieve this without using redundant classes? I attempted to use align-items-end, but it did not work as expected. The goal is to on ...

htmlcssalignmentbootstrap-5vertical-alignment

In Bootstrap 4, the input field and submit button display varying widths

I've been working with Bootstrap 4 and I'm having trouble getting the submit button to match the size of the input field. I've tried a few different combinations, but the button always ends up wider than the input. Could this be due to some ...

htmlcssformsbootstrap-4submit

Tips for showing an image in a pop-up window using Window.open

I'm attempting to show an image in a popup window using the following JavaScript code: function newPopup(url) { popupWindow = window.open( url,'popUpWindow','height=700,width=800,left=10,top=10,resizable=yes,scrollbars=no,t ...

phphtmlwindow.open

Is it possible to display a Twitter feed within a Bootstrap popover?

Is it feasible to showcase a Twitter feed within a Bootstrap popover? For instance, when the Twitter button is clicked, I aim to have my website's Twitter feed appear inside a Bootstrap popover. I have attempted the code below without success. Any a ...

htmlcsstwitter-bootstraptwitter

Unable to display Bootstrap 5 modal

I am currently in the process of constructing a basic webpage that includes a navigation bar and a table. The table rows are being dynamically generated through a simple JavaScript script that fetches data asynchronously from a database. I opted to utilize ...

javascripthtmlbootstrap-modalbootstrap-5

Displaying the outcome of sending an email using PHPMailer's `$mail->send()` function directly on

I have successfully set up PHPMailer with Gmail and tested sending emails to myself, which works perfectly. The user fills out a basic signup form on index.php, which then triggers the email sending process. However, my issue is that after submitting the ...

phphtmlsmtpphpmailer

Steps for displaying text with line breaks on a webpage

https://i.sstatic.net/fxhj6.png I am in need of a way to display text with line breaks using this specific script: <script> var app = angular.module('MyApp', []); app.controller('Ctrl', function ($scope) { consol ...

htmlangularjs

What is the best way to transfer variables between HTML and PHP?

Greetings! I have a quick query: What is the best practice for transferring variables while developing on your website? - get method, post method, session, cookies, hidden fields, etc. ...

phphtmlvariableswebparameter-passing

Is there a way to delay the start of this until a legitimate answer is provided in a pop-up window?

Is it possible to delay the loading of this content until a prompt box is answered with a valid response, and have it only appear once a month? Do I need anything beyond JS and HTML for this functionality? <script language="javascript"> function ...

javascripthtml

Obtain the row ID from a database by selecting checkboxes

I am facing a challenge when trying to remove a row from my MS Access database using checkboxes on my JSP page. Each row in the displayed database has a checkbox, but I am struggling to retrieve the rowId and link each checkbox with its respective row. Any ...

javascripthtmljspcheckbox

Tips for maintaining HTML lines within an 80-character limit

Someone mentioned to me the importance of keeping HTML lines under 80 characters. My code editor, Atom, even displays a reminder for this limit. I've come across many discussions on this topic but haven't found any examples. For instance, consid ...

html

I require an HTML <select multiple> element that includes a disabled option

Can anyone help me figure out how to create a multi-select box with a disabled element? I want the box to have the following options: All ----or---- option 1 option 2 I don't want the "----or----" option to be selectable. Here's the code I&a ...

htmlselect

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

Incorporate HTML segments along with facilitating other JavaScript functionalities

Within my HTML file, I incorporated various HTML sections such as Header and Footer using Jquery. $(function(){ $("#leftsidebar").load("leftsidebar"); $("#topnav").load("topnav"); $("#footer").load("footer"); ...

javascriptjqueryhtmlcss

Switch to a new section element every 20 seconds

After conducting research, I discovered that my initial approach to this task is not feasible. I have two elements on a page: a graph created using the chart.js framework and a data table. The data in the chart only changes once a day, and the data retriev ...

javascriptjqueryhtmlchart.js

The color of the bootstrap button appears incorrect on Chrome browser (Mac) for some reason

I was in need of a grey color for my button, so I opted for the Bootstrap button which helped me achieve my desired look. However, an issue arose when viewing it on Chrome on a Mac system - it displayed a white background instead of grey. Can someone prov ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

My jQuery carousel seems to be malfunctioning. Check out the issue here on JSFiddle

I found this amazing resource for jQuery carousel functionality: If you'd like to see it in action, check out the JSFiddle demo I created: http://jsfiddle.net/svQpc/ However, I've encountered a small issue with the Horizontal version of the car ...

jqueryhtmlcss

Styling with CSS: Scroll content within a parent container when hovering over a fixed child element

I have a container with internal scrolling. Inside, there is content that can be scrolled through, along with a sidebar child element set as position: fixed;. When I hover over the parent and scroll, the contents scroll properly. But, if I hover inside th ...

htmlcsscss-position

Attempting to connect with an Elementor Form submission

I am currently working on a functionality to toggle the visibility of a download button once a user has submitted their email through a standard Elementor form. Despite Elementor offering various actions, I have found that I can only achieve this toggle us ...

javascriptphphtmlwordpresselementor

Tips for converting an entire column along the vertical axis to a different language

Looking for a solution with my grid view where I want to translate the items of the second column on the y axis, as shown in the image. I attempted to use the translateY() function, but it resulted in the need to scroll in order to see the translated items ...

cssgridviewfrontendgridweb-frontend