Two div blocks on same line

Question

How to center on the same "line" two div blocks?

First div:

<div id=bloc1><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>   

Second div:

<div id=bloc2><img src="..."></div> 

Answer 1

CSS:

#block_container {     text-align:center; } #bloc1, #bloc2 {     display:inline; } 

HTML

<div id="block_container">      <div id="bloc1"><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>       <div id="bloc2"><img src="..."></div>  </div> 

Also, you shouldn't put raw content into <div>'s, use an appropriate tag such as <p> or <span>.

Edit: Here is a jsFiddle demo.

Answer 2

You can do this in many way.

1. Using display: flex

#block_container {      display: flex;      justify-content: center;  }

<div id="block_container">    <div id="bloc1">Copyright &copy; All Rights Reserved.</div>    <div id="bloc2"><img src="..."></div>  </div>

2. Using display: inline-block

#block_container {      text-align: center;  }  #block_container > div {      display: inline-block;      vertical-align: middle;  }

<div id="block_container">    <div id="bloc1">Copyright &copy; All Rights Reserved.</div>    <div id="bloc2"><img src="..."></div>  </div>

3. using table

<div>      <table align="center">          <tr>              <td>                  <div id="bloc1">Copyright &copy; All Rights Reserved.</div>              </td>              <td>                  <div id="bloc2"><img src="..."></div>              </td>          </tr>      </table>  </div>