0

カスタム スライダーのテキスト div を中央に配置しようとしています。

何らかの理由で CSS が機能しません。ウェブサイトは私のテスト サーバーhttp://bit.ly/ZgawU6にあります。

上部のスライダーで「環境への懸念」というテキストのグループを中央に配置したいと考えています。このウェブサイトに似ています www.sevenly.org

div を position:absolute; ではなく position:relative に変更すると機能します。ただし、Chromeインスペクターでのみ変更できます。CSSファイルに追加しても機能しません。

このコードが機能しない理由について、誰かが私を正しい方向に向けることができますか?

.custom-slider-caption, .custom-slider-title {
line-height: 1.3;
text-align: center;
position: relative;
}

問題のdiv：

<div class="custom-slider-title" style="top: 0px; opacity: 1;"><div style="position: absolute; left:”0″px; top:140px; right:”0″px; bottom:px; font-size: 43px; color:#fff; text-shadow: 4px 4px 1px #497ca0; ">Environmental Concern</div></div>
4

4 に答える 4

2

絶対位置要素は 100% 幅ではないため、絶対位置では機能しません。witdh を 100% に設定するか、値を 0に設定するのが少しクリーンな解決策です。rightしたがってleft、right位置がゼロになり、幅が自動的に 100% になります。

div {
  positon: absolute;
  top: 140px;
  left: 0;
  right: 0;
}

px%、em、px などでゼロに設定されたディメンションはすべて同じサイズになるため、値がゼロに等しいかどうかを指定する必要さえありません。ゼロはゼロです。

于 2013-04-13T09:08:18.840 に答える
0

div を中央に配置する場合、コードは次のようになります。

#div
{
 width:600px;
 margin-left:auto;
 margin-right:auto;
}

// NOTE: THE WIDTH CAN BE CHANGED //

#div p
{
 width:300px;
 margin-left:auto;
 margin-right:auto;
}
于 2013-04-13T09:07:49.353 に答える
0 
.custom-slider-caption, .custom-slider-title {
  width: 100%;
  line-height: 1.3;
  text-align: center;
}
于 2013-04-13T09:04:11.320 に答える