How to Align Multiple DIV Blocks Horizontally?

Aligning Multiple DIV Blocks Horizontally

Placing multiple DIV blocks on the same horizontal line is a common layout task in web development. To achieve this, follow the steps outlined below:

Set a Parent DIV with text-align: center; to align the child elements horizontally.

Within the parent DIV, set the child DIVs to display: inline;. This allows them to sit side-by-side on the same line.

<code class="css">#block_container {
  text-align: center;
}

#bloc1,
#bloc2 {
  display: inline;
}</code>

Example Content:

<code class="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></code>

Additional Considerations:

• Avoid placing raw content directly inside DIV elements. Use appropriate tags like

  or instead.

• Example:

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

Demo:
https://jsfiddle.net/

The above is the detailed content of How to Align Multiple DIV Blocks Horizontally?. For more information, please follow other related articles on the PHP Chinese website!