4

タイトルが示すように、私は要素を水平方向に中央に配置し、両方の要素を中央に配置せずに、その右側に別の要素を配置しようとしています。2つの要素の1つだけを中央に配置し、もう1つはその右側（この場合は同じ行）に配置します。

以下は私が得ることができる最も近いものですが、両方の要素は、「CENTER」を含む要素だけではなく、中央に配置されています。「CENTER」を中央に配置し、「right」をその右側に配置します。

<div style="text-align:center;">
    <div style="display:inline">CENTER</div>
    <div style="display:inline">right</div>
</div>

私も試しました：

<div style="text-align:center;">
    <div style="display:inline">CENTER</div>
</div>
<div style="display:inline">right</div>

これにより、「right」の要素が次の行に移動します。text-align：centerを使用してdivにdisplay：inlineを追加すると、中央揃えが削除されます。

これを実現する方法はありますか？中心に置くことについてはたくさんの情報がありますが、私がやろうとしていることに答えるものは何もないようです。

4

1 に答える 1

4

これを試してください-http://jsfiddle.net/dGSDF/2/

#center {
  position: relative;
  height: 100px;
  width: 60%;
  margin: auto;
  background: beige;
}

#right {
  position: absolute;
  right: -20%;
  /* the div's width */
  top: 0;
  width: 20%;
  background: orange;
  height: 100px;
}
<div id="center">
  CENTER
  <div id="right">right</div>
</div>

于 2012-07-13T22:08:40.093 に答える