-1

画像を中央に配置してから、下のワイヤーフレームに合わせてテキスト (またはボタン) を左右にフロートさせたい:

ここに画像の説明を入力

私はあなたができないことを知ってfloat: center;おり、簡単なWeb検索から、推奨されるすべてのソリューションはちょっとしたハックです. では、この特定の状況に合わせて css をセットアップするにはどうすればよいでしょうか? 私は価値のあるもののために Twitter Bootstrap を使用しています (この場合はおそらく何もありません)。

4

3 に答える 3

3

float: leftパーセンテージ幅の 3 列すべてを使用できます。このようなもの：

#col1, #col2, #col3 {
     float: left;
} 

#col1, #col3 {
    width: 25%;
}

#col2 {
    width: 50%;
    text-align: center;
}

また、Twitter Bootstrap を使用している場合は、3 列のFluid Grid Systemを使用することをお勧めします。

于 2013-01-08T16:27:07.680 に答える
0

うまくいけば、画像の固定幅で作業できます。次にpostion: absolute、ネガmarginを使用して画像を中央に配置できます。次に、代わりfloatにどちらかの側への反応を行うことができます。

モックアップでの外観は次のとおりです： jsFiddle

コンテナの最小の高さを設定する必要がある場合があります。反応がない場合、画像/中央の列を無視して、コンテナは完全に崩壊します。

反応の最大幅も必要になる場合があります。次に、それらは側面のオープンスペースに収まります。

于 2013-01-08T21:13:09.490 に答える
0

デザインの応答性を気にせず、コンテナーと中央の画像サイズが (ビューポートに関係なく) 一定である場合は、すべての要素を絶対位置に配置できます。

<div style="position: relative;">
  <div style="position: absolute; top: HEIGHT_OF_THE_VIEWPORT_MINUS_HEIGHT_OF_THE_IMAGE_DIVIDED_BY_2; left: WIDTH_OF_THE_VIEWPORT_MINUS_WIDTH_OF_THE_IMAGE_DIVIDED_BY_2;">
    <img src="..." />
  </div>
</div>

レスポンシブ レイアウトでは、不明なサイズのコンテナーと不明なサイズの中央の画像に対処する必要があります。

text-align: center;とmargin: 0 auto;スタイルを使用すると、簡単に水平方向に中央揃えできます。

CSS で縦方向に中央揃えするのは難しい部分です。display: table;and (「テーブル方式」)を使用できますvertical-align: middle;が、Internet Explorer では問題が発生します。「負のマージン」および「ポジショニング」メソッドは IE で機能します。Google で「vertical align css」を検索すると、多くの有用な議論が示されましたが、良いブラウザーと IE >= 6 で機能する 2 つの以前の方法 (この記事を参照) の組み合わせをお勧めします。

<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div class="greenBorder" style=" #position: relative; #top: -50%">
      some<br/>
      content
    </div>
  </div>
</div>

トリックは、IE 部分と「その他」の部分を混ぜ合わせて、IE によって読み取られないスタイルに接頭辞を付けること#です。

この方法では、コンテナーのさまざまなサイズに調整できますが、中央に配置された画像のサイズは応答して変化しないことに注意してください。

良い方法 (シンプルでポータブル) は、中央の画像を背景として使用することです。使用してみてください:

#row {
  background-image: url(img/image.png);
  background-position: center center;
  background-repeat: no-repeat;
}

左中央と右列を分離するブートストラップ レイアウトの css ( #col1、#col2および#col3)。水平方向と垂直方向の両方で画像が中央に配置されます。

更新：背景の方法では、画像を拡大（拡大）したくない場合、応答して画像を縮小することはできません:(

于 2013-01-08T21:35:16.837 に答える