73

如何以同一“行”两个 div 块为中心？

第一个分区： 

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

第二个分区： 

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

11 回答 11

102

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>'s，使用适当的标签，例如<p>or <span>。

编辑：这是一个jsFiddle 演示。

于 2012-05-04T15:14:47.510 回答
51

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

  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>

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

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

于 2017-04-17T07:23:56.243 回答
32

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

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

编辑（02/2021）：

现在的最佳实践可能是display: flex; flex-wrap: wrap;在 div 容器和flex-basis: XX%;div 上使用

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

于 2016-06-21T09:27:55.047 回答
11

您可以使用 HTML 表格：

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>
于 2014-01-15T14:34:22.660 回答
5

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

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

（或使用 HTML 表格）

于 2012-05-04T15:12:06.960 回答
3

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

于 2017-04-15T19:07:21.140 回答
1

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;
    }
于 2017-04-19T14:52:07.630 回答
0

我首先要做的是编写以下 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>
于 2012-05-04T15:15:11.427 回答
0

在 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>
于 2015-09-14T21:30:31.210 回答
0

使用下面的CSS：

#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

它将使上述 2 个 div 位于同一行的中心。

于 2017-04-18T20:18:34.403 回答
-2

Use Simple HTML

<frameset cols="25%,*">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
</frameset>
于 2017-11-22T12:43:30.263 回答