Two Divs on The Same Row and Center Align Both of Them

Center align two divs in the same row

There's an old technique of centering the content of the parent, then making the children display: inline-block;. You will have to account for the visibility of the white-space " " character — but that is pretty well documented (e.g. Remove Whitespace Between Inline-Block Elements). You'll have to play with margin to restore your spacing, AND remember to change the JS to reflect inline-block instead of block when restoring the elements.

In the interest of selector sanity, I added an example class to the containing row element in the code demo.

HTML

<div class="row centered-buttons">

CSS

.centered-buttons {
    text-align: center;
}

.centered-buttons a {
    display: inline-block;
    vertical-align: middle;
}

.margin-bottom-20 {  margin-bottom: 20px;}
.collabProjects:hover,.collabFiles:hover,.collabSocially:hover {  box-shadow: 0 0 15px rgba(33, 3, 3, .2);}
.decisionTreeBox {  background-color: #4B92DB;  color: white;  width: 300px;  height: 140px;  display: flex;  justify-content: center;  align-items: center;  transition: box-shadow .3s;}
#decisionTreeOneDrive {  background-color: #094AB2;  color: white;  width: 300px;  height: 140px;  display: flex;  justify-content: center;  align-items: center;}
#decisionTreeSharePoint {  background-color: #008CE7;  color: white;  width: 300px;  height: 140px;  display: flex;  justify-content: center;  align-items: center;}
#decisionTreeTeams {  background-color: #4A1EBD;  color: white;  width: 300px;  height: 140px;  display: flex;  justify-content: center;  align-items: center;}
#innerBoxHeadings {  color: white!important;  text-align: center;  padding-top: 5px;}
#columnMiddleBorderLeft,#pageTitle {  display: none!important;}
.centered-buttons {  text-align: center;}
.centered-buttons a {  display: inline-block;  vertical-align: middle;}

<div class="outer-container">  <div class="row">    <div class="col-md-6" style="text-align: center;">      <div data-collaborate="shareCollab" class="decisionTreeBox" style="font-size: x-large; float: right;">        Share and Collaborate</div>    </div>    <div class="col-md-6" style="text-align: center;">      <div data-collaborate="shareExternally" class="decisionTreeBox" style="font-size: x-large;">        Share Externally</div>    </div>  </div>  <hr />  <div class="container" style="padding: 0px;">    <div class="row centered-buttons">      <a href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx">        <div class="col-md-4 margin-bottom-20" style="text-align: center;">          <div data-decision="shareExternally" id="decisionTreeOneDrive">            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/onedrive-logo.png" style="width: 65px; height: 65px; padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />OneDrive</h3>          </div>        </div>      </a>      <a href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx">        <div class="col-md-4 margin-bottom-20" style="text-align: center;">          <div data-decision="shareCollab shareExternally" id="decisionTreeSharePoint">            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/SharePointDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />SharePoint</h3>          </div>        </div>      </a>      <a href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx">        <div class="col-md-4 margin-bottom-20" style="text-align: center;">          <div data-decision="shareCollab" id="decisionTreeTeams">            <h3 id="innerBoxHeadings"><img src="/TrainingResourceCenter/O365Training/PublishingImages/TeamsDecisionTree.png" style="padding-bottom: 5px; padding-right: 10px; vertical-align: middle;" />Teams</h3>          </div>        </div>      </a>    </div>  </div></div><script>  function projectCollab() {    var divsToCange = document.querySelectorAll('[data-decision]'),      attr = this.getAttribute('data-collaborate');
    for (var i = 0; i < divsToCange.length; i++) {      var d = divsToCange[i];
      if (d.getAttribute('data-decision').includes(attr)) { /* Had: == attr) { */        d.parentNode.style.display = 'block';      } else {        d.parentNode.style.display = 'none';      }    }    return false;  }
  var divButtons = document.querySelectorAll('[data-collaborate]');
  for (var i = 0; i < divButtons.length; i++) {    divButtons[i].addEventListener('click', projectCollab);  }</script>

trying to align two divs to the center to begin at thesame position

If you remove the id attribute for div#container and replace it within .descriptionarea class and you wrap both divs with a parent div#container your divs will line up in the center.

<div id="container">
<div class="descriptionarea">
    <div id="chats-container" class="inner-container"></div>
    <div id="users-container" class="inner-container"></div>
</div>
<div class="descriptionarea">
    <textarea id="new-chat-input" ></textarea>
    <span class="buttonfortxtarea">
             <button class="btn btn-mini description_submit" id="new-chat-button">Submit</button>
    </span>
</div>
</div>

Set two div in the same line to display in the center

Use the flexible box solution. Set display: flex to parent element of the two boxes and then align them to center using justify-content: center.

Check the current browser compatibility table for flexbox

.table-1 {  display: flex;  justify-content: center;}.box-1 {  background: url(../images/_C008.jpg) no-repeat center center /cover;  width: 32%;  height: 300px;  float: left;}.box-2 {  background: #374140;  width: 32%;  height: 300px;  overflow: hidden;}

<div class="table-1">  <div class="box-1">    <p>Au quotidien, la vie de l’atelier est organisée autour des tâches minutieuses de chacun et tous sont conscients que l’excellence est le résultat d’un travail d’équipe.</p>  </div>  <div class="box-2">    <p>Au quotidien, la vie de l’atelier est organisée autour des tâches minutieuses de chacun et tous sont conscients que l’excellence est le résultat d’un travail d’équipe.</p>  </div></div>

Align two divs on the same line without modifying the HTML

<div class="main_one">
    <div class="number one">Title A</div>
</div>
<div class="main_two">
    <div class="number two">Title B</div>
</div>

<div class="main_three">
    <div class="number one">Title C</div>
</div>
<div class="main_four">
    <div class="number two">Title D</div>
</div>

<style type="text/css">
    .main_one{
        float:left;
    }

    .main_two{
        float:left;
    }

    .main_three{
        clear:both;
        float:left;
    }

    .main_four{
        float:left;
    }
</style>

Align 2 divs in same line without using float

you can do like this.

.main {  width: 1400px;  background-color: #c3c3c3;  position: relative;  text-align: center;}.child1 {  background-color: #666;  width: 600px;  margin: auto;  display: inline-block;}.child2 {  background-color: #888;  width: 600px;  margin: auto;  display: inline-block;}

<div class="main">  <div class="child1">Child 1</div>  <div class="child2">Child 2</div></div>

How do I keep two divs on the same line?

You can make two divs inline this way:

display:inline;
float:left;

How to align two div tags horizontally in the same line inside a main div tag?

css

display:inline-block

add div right part and left part css

---

Related Topics