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

Answer 2

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

使用display: flex

＆＃13;

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

＆＃13;

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

＆＃13;

使用display: inline-block

＆＃13;

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

＆＃13;

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

＆＃13;

使用table

＆＃13;

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

＆＃13;

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表格）

Answer 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

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

Answer 8

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;
    }

Answer 9

我首先要做的是以下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>

Answer 10

使用以下Css：

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

它将使中间提到的2个div位于同一行。

Answer 11

使用简单的HTML

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

同一行上有两个div块

11 个答案: