同一行上的两个 div 块

【问题标题】：Two div blocks on same line同一行上的两个 div 块
【发布时间】：2012-05-14 03:39:37
【问题描述】：

如何使两个 div 块在同一“行”上居中？

第一个 div：

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

第二格：

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

【问题讨论】：

通过 CSS 浮动或内联块。
您也可以使用display : table-cell; 并使用<br>在您想要的位置添加换行符
相关帖子 - Align <div> elements side by side

标签： html css

【解决方案1】：

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

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

（或使用 HTML 表格）

【讨论】：

表格用于表格数据...不用于演示。
html 表格也是一种呈现数据的方式。嗯？
之后可能想通过<div style={{clear: "left"}}>重置格式

【解决方案2】：

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 demo。

【讨论】：

图片在中间...文字在后右对齐
@Bertaud 那么你必须有一些其他的 CSS/HTML 干扰，因为上述工作。请参阅我的 jsFiddle 演示。
我认为你是对的 :-( 你知道如何验证整个 html 页面吗？
Gildor 的答案是首选，因为它也适用于嵌套
标签使用 display:inline-block;.
我想将bloc1 居中并将bloc2 向右对齐，同时保持它们在同一行。如何做到这一点？

【解决方案3】：

我首先要做的是编写以下 CSS 代码：

#bloc1 {
   float: left
}

这将使#bloc2 与#bloc1 内联。

为了使其成为中心，我将在单独的 div 中添加 #bloc1 和 #bloc2。例如：

<style type="text/css">
    #wrapper { margin: 0 auto; }
</style>
<div id="wrapper">
    <div id="bloc1"> ... </div>
    <div id="bloc2"> ... </div>
</div>

【讨论】：

这不起作用：bloc1 在右边，bloc2 在另一行！

【解决方案4】：

您可以使用 HTML 表格：

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

【讨论】：

【解决方案5】：

在 div 中使用表格。

<div>
   <table style='margin-left: auto; margin-right: auto'>
        <tr>
           <td>
              <div>Your content </div>
           </td>
           <td>
              <div>Your content </div>
           </td>
        </tr>
   </table>
</div>

【讨论】：

【解决方案6】：

我认为现在最好的做法是使用display: inline-block;

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

编辑（02/2021）：

现在的最佳做法可能是在 div 容器上使用 display: flex; flex-wrap: wrap;，在 div 上使用 flex-basis: XX%;

看起来像这个演示：https://jsfiddle.net/42L1emus/1/

【讨论】：

谢谢！！这是一个比公认的更好的答案，因为它也适用于嵌套的
！
这也是比接受的内联块封面边距最好的答案
完美运行！谢谢
不！一旦你做出不均匀的宽度，这将无法正常工作：jsfiddle.net/L8rkqzd2
@tatsu 这是真的！不幸的是，如果宽度不均匀，您也需要锁定相同的高度。看看这是否能解决您的问题：jsfiddle.net/0a7x3oya/1

【解决方案7】：

diplay:flex; 是另一个替代答案，您可以将其添加到所有modern browsers 支持的所有上述答案中。

#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>

【讨论】：

【解决方案8】：

您可以通过多种方式做到这一点。

使用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>

使用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>

使用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>

【讨论】：

【解决方案9】：

在Css下面使用：

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

它将使提到的2个div在同一行的中心。

【讨论】：

【解决方案10】：

HTML 文件

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

CSS 文件

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

【讨论】：

【解决方案11】：

使用简单的 HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。