0

フォーム要素を div の中央に配置したい (水平および垂直)。div 全体を中央に配置し、左右の div の間に配置します。

問題:

  • パディングにより、右の div がずれています。
  • また、テキスト (Text1) が垂直方向に正しく配置されていません。-> パディングトップの作品
  • フォームのコンテンツ全体が水平方向に配置されていません。

ここに例があります。

HTML:

<div id="top">
  <div id="top-background-left">&nbsp;</div>
  <div class="external">
    <div class="externalinner">
      <form id="form" name="form" method="post" action="action.html">
        <p style="float: left; padding-right: 10px;">Text1</p>
        <input name="one" id="one" type="text" size="15" maxlength="10" />
        <select name="no" size="1">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2" selected>2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
        <button type="submit">Go</button>
      </form>
    </div>
  </div>
  <div id="top-background-right">&nbsp;</div>
</div>

CSS:

#top{
    padding: 0px;
    width: 100%;
    height: 66px;
    background-color: #efa910;
    z-index:12;
    position:fixed;
    overflow:hidden;
}

.externalinner {
    text-align: left;
    padding-top: 20px;
}

.external {
    background: #efa910;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    width:900px;
}


#top-background-left {
    background: white;
    width: 150px;
    height: 66px;
    float: left;
}

#top-background-right {
    background: white;
    width: 150px;
    height: 66px;
    float: right;
}
4

3 に答える 3

1

ガレスがここで言ったように

<div id="top-background-right">&nbsp;</div>を の前に移動すると<div class="external">、正しい div の位置合わせのずれが解決されます。

テキストの配置については、 a に変更<p>して CSS から<span>削除するfloat:leftと、フォームの残りの部分と一緒にインライン要素になり、水平方向に中央揃えにすることができます。(または、自分に最も適したものに変更float:leftすることもできます。display:inline

width: 900px最後に、.external クラスから削除する必要があります。また、次の 2 行:

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

どちらも必要ないので、削除できます。

これがあなたのためのjsFiddleです。

于 2012-07-18T16:43:28.643 に答える
1

<div id="top-background-right">&nbsp;</div>を の前に移動すると<div class="external">、右のdivずれが解決されます。

フォームの高さと同じを追加するline-heightとp、テキストのずれが修正されます。

変更されたjsFiddle

3番目の問題の意味がわかりません。

于 2012-07-18T16:30:09.827 に答える
0

他のポスターがすでに言ったように、 line-height はテキストを垂直方向に中央揃えするための優れた方法です。

位置を使用して div を配置する、float のない例を次に示します。

3 つの要素の周りにコンテナーを追加し、左右の div を緑色で強調表示して、それらが見えるようにしました。

それがあなたにとっても問題ないのか、それとも私が間違っていたのか、html ソースを変更せずに解決策を見つけなければならないのか教えてください。

jsfiddle の例

于 2012-07-18T16:46:36.730 に答える