同一行上有两个div块

Question

如何以同一"线"两个div块为中心？

第一个div:

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

第二个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>

此外,您不应将原始内容放入<div>,使用适当的标签,如<p>或<span>.

编辑:这是一个jsFiddle演示.

Answer 2

你可以用很多方式做到这一点.

1. 运用 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. 运用 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. 运用 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>

Answer 3

我想现在,最好的用法是使用 display: inline-block;

看起来像这个演示:https://jsfiddle.net/vjLw1z7w/

Answer 4

您可以使用HTML表格:

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>   

Answer 5

尝试使用 HTML 表格或使用以下 CSS：

<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

（或使用 HTML 表格）