Home > Web Front-end > CSS Tutorial > How do I align two Div blocks on the same line using CSS?

How do I align two Div blocks on the same line using CSS?

Patricia Arquette
Release: 2024-11-03 15:40:03
Original
472 people have browsed it

How do I align two Div blocks on the same line using CSS?

Aligning Two Div Blocks on the Same Line

To align two div blocks on the same line, you can use CSS properties like text-align and display.

CSS:

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

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

HTML:

<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>
Copy after login

Follow these guidelines to ensure proper alignment:

  • Wrap the div blocks in a container div (#block_container) and set its text-align to center.
  • Set the display property of the div blocks (#bloc1 and #bloc2) to inline to make them appear on the same line.
  • For best practices, avoid placing raw content directly into div tags and instead use semantic tags like

    or for text.

By applying these styles, the two div blocks will align horizontally on the same line within their container.

The above is the detailed content of How do I align two Div blocks on the same line using CSS?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template