Attempting to align several div elements in the middle while ensuring they all stay in a single row

Question

Attempting to align several div elements in the middle while ensuring they all stay in a single row

I've been attempting to center a contact form and a feedback form side by side. I tried using float: left; for both to align them horizontally, but I also want them to be centered on the page.

Whenever I manage to display them together horizontally, they stay stuck to the left side. And when I try to center them, they stack on top of each other.

I'm striving to achieve both of these goals.

I've experimented with:

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 500px;

I've also attempted using float: left; to position them next to each other horizontally, but I can't seem to center them that way either.

text-align: center;

It appears that this only centers the text within the div tags, not the full div itself.

Please lend a hand, thank you!

html css

Answer 1

Answer №1

Enclose all elements within a centralized parent container.

<div id="container"><!--your content goes here --></div>

Set a specific width for the parent container and apply margin: 0 auto;:

#container{
margin: 0 auto;
width:800px;
}

Answer 2

Enclose all elements within a centralized parent container.

<div id="container"><!--your content goes here --></div>

Set a specific width for the parent container and apply margin: 0 auto;:

#container{
margin: 0 auto;
width:800px;
}

Answer 3

Answer №2

I believe this is exactly what you've been searching for, and it's quite responsive too.

The pair of divs are nicely centered inside a container div.

Here's the code snippet:

<div id="mainContainer">
<div class="leftSideDiv"></div>
<div class="rightSideDiv"></div>
</div>

#mainContainer{
  width:auto; 
  margin:none;
  height:200px;
  background-color:#3f3f3f;
  align-content:center;
  padding:1em 0;
}
.leftSideDiv{
  background-color:#696969;
}
.rightSideDiv{
  background-color:#939393;
}
.halfDiv{
  display:inline-block;
  height:100px;
  margin: 0 2%;
  width:46%;
  float:left;
}

Answer 4

I believe this is exactly what you've been searching for, and it's quite responsive too.

The pair of divs are nicely centered inside a container div.

Here's the code snippet:

<div id="mainContainer">
<div class="leftSideDiv"></div>
<div class="rightSideDiv"></div>
</div>

#mainContainer{
  width:auto; 
  margin:none;
  height:200px;
  background-color:#3f3f3f;
  align-content:center;
  padding:1em 0;
}
.leftSideDiv{
  background-color:#696969;
}
.rightSideDiv{
  background-color:#939393;
}
.halfDiv{
  display:inline-block;
  height:100px;
  margin: 0 2%;
  width:46%;
  float:left;
}

Answer 5

Answer №3

Opt for using the display property with a value of table rather than block.

display: table;
    margin: 0 auto;
    width: 500px;

Answer 6

Opt for using the display property with a value of table rather than block.

display: table;
    margin: 0 auto;
    width: 500px;

Answer 7

Answer №4

To achieve a horizontal line-up of elements, replace display: block with flex* and add justify-content: center*

*

If elements are stacking vertically, they likely have display: block. For a horizontal layout, use display: inline or display: inline-block†. Most form elements default to display inline.

I opted for input tags instead of divs as they are inline. If using divs, give them display: inline-block:

div { display: inline-block; }

The "div" selector can vary based on your code (which is curiously absent) -_-

†

Also created a demo with 2 fieldsets #contact and #feedback.

http://plnkr.co/edit/pET6ZsG3IKQITXqnXBZY?p=preview

body {
  width: 100vw;
}
#bar {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 2px solid black;
}
input {
  width: 40px;
  text-align: center;
}

<section id="bar">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
</section>

Answer 8

To achieve a horizontal line-up of elements, replace display: block with flex* and add justify-content: center*

*

If elements are stacking vertically, they likely have display: block. For a horizontal layout, use display: inline or display: inline-block†. Most form elements default to display inline.

I opted for input tags instead of divs as they are inline. If using divs, give them display: inline-block:

div { display: inline-block; }

The "div" selector can vary based on your code (which is curiously absent) -_-

†

Also created a demo with 2 fieldsets #contact and #feedback.

http://plnkr.co/edit/pET6ZsG3IKQITXqnXBZY?p=preview

body {
  width: 100vw;
}
#bar {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  border: 2px solid black;
}
input {
  width: 40px;
  text-align: center;
}

<section id="bar">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
  <input value="INPUT">
</section>

Attempting to align several div elements in the middle while ensuring they all stay in a single row

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Methods for updating an HTML-select without a page reload in PHP

Issue with AngularJS causing HTML input field to limit the display to only three digits

Is it possible to increase the delay in the nth-child selector?

What is the process for altering fonts in a Chrome OS application?

Create a specific part of a webpage that can be scrolled through

Learn how to dynamically set the "selected" option in Vue based on object data

Assess html code for Strings that include <% %> tags along with embedded scripts

The content is not wrapped when transferred from App.js through props, although it is being wrapped in other scenarios

What is the best way to center a navbar vertically inside a div?

What is the process for creating a hover linear wipe transition using CSS/JS?

Adjust background image size to fit the dimensions of the foreground content

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

Can non-mobile browsers handle touch events effectively?

Instructions for swapping out the default drop-down icon in my select box with the <i class="icon-xyz-chevron down-rotation"></i> symbol

Schedule Master: A sophisticated tool for time management

Styling images and text in CSS within a jQuery UI autocomplete widget

IE9 - The suitable alternative for framesets

Designate the preferred location for requesting the desktop site

What is the process of displaying text within a link?

The stylesheet's URL reference to the image is not functioning properly