web-dev-qa-db-ja.com

divの中心を固定位置で水平にするにはどうすればよいですか？

私はdivを水平方向の中央にしたいのですが、cssコードはこれです：

<style type="text/css">
#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:500px;
            margin: auto;/*left:auto; right:auto;*/
}
</style>

とhtmlコード：

<body>
<div id="footer">hello world</div>
</body>

私のcssコードを説明する必要はないと思います、それはほとんど自明ですが、divは水平方向の中央にありません、これを作る方法はありますか？前もって感謝します。

csshtmlcenter
9
hiway

これを試して

#footer{
    position: fixed;
    bottom: 20px;
    background-color: red;
    width:80%;
    margin: 0 0 0 -40%;
    left:50%;
}

JS Fiddle例

ここで注意すべき点は、マイナスmargin-leftの半分の値のwidthと、本体のleftを50％に設定

20
Sachin

これでうまくいくはずです。コンテナーdivを追加することで機能します。

<style>

#footer-container{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

#footer
{
    width:500px;
    margin:0 auto;
    margin-bottom:20px;
    background-color:red;
}
</style>


<div id="footer-container">
      <div id="footer">hello world</div>
</div>
8
Nick N.

内部に別のdivを配置し、マージンをautoにします。固定幅を100％にします。

それ以外の場合は、負のマージン「トリック」でハックできます

div { 
    position: fixed;
    left: 50%;
    width: 500px;
    margin-left: -250px;
}
6
Greg Benner

最新のブラウザを使用している場合は、flexboxレイアウトモジュール： http://caniuse.com/#feat=flexbox を使用できます。

Flexboxのドキュメント：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
注：担当者の都合により、2つを超えるリンクを投稿することはできません。

JSFiddle 。

（div#footerの代わりにfooterタグを使用する方が簡単です。）

<div id="footer-container">
  <footer>hello world</footer>
<div>

#footer-container {
  bottom: 20px;
  position: fixed;

  display: flex;
  justify-content: center;
  width: 100%;
}

footer {
  width: 500px;

  background-color: red;
}

justify-content: center; 'centers' #footer-containerの子。この場合はfooter要素にすぎません。

これは、Nick N.のソリューションと非常に似ていますが、フッターのtext-alignプロパティをリセットする必要がないことと、これはおそらく、望んでいるトリックではない方法であることを除けばです。

その場合のフッターの幅が500pxではなく可変（80％）であるため、受け入れられたソリューションは少しずれています。

他の読者にとって、親がform要素であり、子がinput要素である場合、input（子）要素でflex: 1;を使用し、 max-width: 500px;の代わりにwidth: 500px;を使用してください。 flex: 1;を使用すると、input要素の幅を満たすようにform要素が拡張されます。

4
xd1le