How to display two div element in one line and align the whole in center?

[tess1243]

How to display two div element in one line and align the whole in center?

I know that we can display two div elements in one line by giving float:left;.

But For Example:

<div class="MainDiv" id="div1">
  <div class="InnerDiv1" id="div2">
    <span>Hello,</span>
  </div>
  <div class="InnerDiv2" id="div3">
    <span>How are u doing?</span>
  </div>
</div>

I want the output to be

"Hello, How are u doing?" that to be aligned centered

If we give float:left; we get the text in one line but aligned to left.

Is there any other way to get the desired output?

[drhowarddrfine]

We don't do things this way but to get what you want:

<style>
#div1{ width:200px; margin:0 auto}
#div2, #div3 {display:inline}
</style>
<div class="MainDiv" id="div1">
  <div class="InnerDiv1" id="div2">
    <span>Hello,</span>
  </div>
  <div class="InnerDiv2" id="div3">
    <span>How are u doing?</span>
  </div>
</div>