1

この質問の前に、私は独学の (アマチュア) Web 開発者である (そしてあまり良い開発者ではない) という警告を付けさせてください。私は長い間、AP Div を使用して Web ページをセンタリングする効果的な方法を見つけようと試みてきました。「margin: 0 auto;」を設定してみました。「margin-left: auto;」を設定してみました。どちらもその1つのdivで機能します。しかし、それをデザインするためのラッパーとして使用する必要があるため、その中にさらに div を配置すると、それらは中央に配置されません。

私はこれに完全に間違ったアプローチをしている可能性があります。もしそうなら、私を修正してください。私がやりたいことの基本的なバージョンのコード (動作しない) は以下のとおりです。このコードを実行すると、たとえば apDiv1 に画像を配置すると、ページ サイズに合わせて適切にスケーリングされます。しかし、apDiv2 のテキストはそうではありません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Page</title>
<style type="text/css">
#apDiv1 {
    margin: 0 auto;
    width:600px;
}
#apDiv2 {
    position:absolute;
    width:50px;
    height:24px;
    z-index:1;
    left: 47px;
    top: 29px;
}
</style>
</head>

<body>
<div id="apDiv1">
  <div id="apDiv2">Hello</div>
</div>
</body>
</html>
4

3 に答える 3

0

私自身の意見では、appdivsを使用するのは良くありません（デザイン上でどのように配置したかによって異なります）。あなたはあなた自身でそれをすることができます（中心のもの）、これをチェックしてください：

センタリング（簡単なサンプル）

<style>
#header {
margin:auto;
width:600px;
background:#000;
padding:5px;
}
#title {
width:50px;
margin:auto;
background:#CCC;
padding:5px;
}
</style>

<div id="header">
   <div id="title">Hello World</div>
</div>

カスタムAppDivsは、実際には必要のない余分なスタイルを追加します:)

于 2012-12-28T03:10:11.157 に答える
0

更新された例

いくつかの推測と突っ込みの後、中央揃えのラッパー内に要素を絶対に配置したいということだと思います。

position: absolute親が持っていない限り、ページに絶対になりますposition: relative。

#apDiv1 {
    margin: 0 auto;
    width:600px;
    position:relative;
}
于 2012-12-28T02:21:36.950 に答える
0

margin-left:auto;andを使用して、別の div 内で div を中央に配置できますmargin-right:auto;。

作業例: http://jsfiddle.net/xjKhT/

于 2012-12-28T02:21:49.947 に答える