73

同じ「線」の2つのdivブロックを中心に置く方法は？

最初のdiv： 

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

2番目の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>などの適切なタグを使用してください。<p><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/

編集（2021年2月）：

現在のベストプラクティスはdisplay: flex; flex-wrap: wrap;、divコンテナとdivでflex-basis: XX%;使用することです。

このデモのように見えます：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

シンプルなHTMLを使用する

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