logo标签列表

同一行放置两个div块

htmlcss
77
如何在同一“行”上居中两个 div 块？
第一个 div：
<div id=bloc1><?php echo " version ".$version." Copyright &copy; All Rights Reserved."; ?></div>

第二个 div：

<div id=bloc2><img src="..."></div>
1
通过CSS使用Float或inline-block。 - j08691
你也可以使用display: table-cell;，并在需要的位置使用<br>添加换行。 - specdrake
相关帖子 - 如何将<div>元素并排对齐 - RBT
11个回答
115

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演示。

1
图片位于中间...文本在其后并右对齐。 - Bertaud
@Bertaud，那么你一定有其他干扰CSS/HTML的因素，因为上面的代码是有效的。请查看我的jsFiddle演示。 - MrCode
我认为你是正确的 :-( 你知道如何验证整个HTML页面吗？ - Bertaud
Gildor的答案更可取，因为它也适用于使用display:inline-block;嵌套的<div>标签。 - j.c
我想将 bloc1 居中并将 bloc2 对齐到右侧，同时保持它们在同一行。如何实现？ - Cardinal System
64

你可以用多种方式来实现。

  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>

35

我认为现在最佳实践是使用display: inline-block;

看起来像这个演示：

div {
  width: 40%;
  padding: 20px;
  display: inline-block;
}
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

编辑（02/2021）：

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

看起来像这个演示：

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

div {
  flex-basis: 45%;
  margin-top: 20px;
}
<body>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</body>

3
谢谢！这个答案比被采纳的更好，因为它也适用于嵌套的<div>。 - j.c
1
这是比被接受的答案更好的答案，因为 inline-block 也包含了 margin。 - Ismail Farooq
不行！一旦你制造了不均匀的宽度，这个就无法工作了：https://jsfiddle.net/L8rkqzd2/ - tatsu
1
@tatsu没错！如果宽度不一致，不幸的是您需要锁定相同的高度。看看这个是否解决了您的问题： https://jsfiddle.net/0a7x3oya/1/ - Simone S.
11

您可以使用HTML表格：

<table>
<tr>
<td>
<div id="bloc1">your content</div>
</td>
<td>
<div id="bloc2">your content</div>
</td>
</tr>
</table>
5
尝试使用HTML表格或使用以下CSS样式：
<div id="bloc1" style="float:left">...</div>
<div id="bloc2">...</div>

（或使用HTML表格）
2
表格是用于表格数据，而不是用于展示的。 - Ben Everard
3
HTML表格也是一种展示数据的方式。嗯？ - devasia2112
之后可能需要通过<div style={{clear: "left"}}>来重置格式化。 - Neil
3

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
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;
    }
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>
那不起作用：bloc1在右边，bloc2在另一行！ - Bertaud
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>
0
请使用以下 CSS：
#bloc1,
#bloc2 {
display:inline
} 

body {
text-align:center
}

这将使提到的两个div在同一行居中显示。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接