44

中央に配置したい div があるため、問題が発生しています。通常、これを行うように言われています。

width: 700px;
margin-left: auto;
margin-right: auto;

問題は、これは div を固定幅にしたい場合です。div 内のテキストに基づいて div のサイズを調整し、中央に配置したい。私は試した:

width: auto;
margin-left: auto;
margin-right: auto;

しかし、これはうまくいきませんでした。これを行うと、divが引き伸ばされて画面がいっぱいになります。

ここで何をすべきか知っている人はいますか?

4

9 に答える 9

14

ここに示されているアプローチを試しましたか? http://www.tightcss.com/centering/center_variable_width.htm

基本的。フローティング div 内にコンテンツを配置する そのフローティング div を別のフローティング div 内に配置する

左に置く: 50%、外側の div に相対的な位置 左に置く: -50%、内側の div に相対的な位置

最後に、overflow:hidden を使用して、すべてをもう 1 つの div にネストします

.outermost-div{
    background-color: blue;
    overflow:hidden;    
}

.inner-div{
   float:left;
   left:50%;
   background-color: yellow;
   position: relative;
}

.centerthisdiv {
   position:relative;
   left: -50%;
   background-color: green;
   float:right;
   width:auto;
}

これが私のjsfiddleのデモです: http://jsfiddle.net/wbhyX/1/

于 2013-08-30T04:53:49.387 に答える
3

この構造を試してみてください。

<div class="container">
    <div class="center_div">

    </div>
</div>



.container{
    float: left;
    left: 50%;
    position: relative;
}
.center_div{
   position: relative;
   left: -50%;
   float: left;
}
于 2013-08-30T04:20:13.087 に答える
0

編集:

を使用するtableと、スタイリングが簡単になります。次にdivtr

于 2013-08-30T04:11:37.433 に答える
0

要素を水平方向に中央に配置すると、機能があまり直感的ではないため、少し奇妙になることがあります。text-align:center;本当に、あなたはandを使ってゲームをするmargin:auto,必要があり、いつ which を使うべきかを知る必要があります。

たとえば、ボタンや入力を含む要素 (raw-text) のコンテンツを中央揃えにしたい場合は、 を使用できますtext-align:center

.text-center {
  text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
  My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>

コンテナに他の要素を追加すると、それらの要素の幅は 100% に強制されます。これは、技術的には 100% で中央にあるため、中央にあることをエミュレートするのに役立ちます。ばかげていますよね?

.text-center {
  text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
  My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
  <p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>

ただし、幅プロパティが定義されている場合は、margin: autoスタイルを使用して親の中央に配置できます。

<div style="margin:auto;border:1px solid black;width:300px;" >
  I am centered!
</div>

どのソリューションが最適かを判断する必要があります。もっとお役に立てれば幸いですが、問題の HTML が提供されていない場合、どのソリューションがお客様のニーズに最も適しているかを判断するのは困難です。

いずれにせよ、この JSFiddleが問題の解決に役立つことを願っています!

于 2015-11-25T18:34:18.790 に答える