4

ポートフォリオサイトの作成に取り組んでいますが、カルーセルに問題が続いています。スタイリングが気に入ったのでbxsliderを試してみることにしましたが、画像をビューポートの中央に配置する方法について、ここ1週間悩んでいます。

なんとかスライダーを起動して実行しましたが、どこかに競合する CSS があるかのように、画像が中心からずれて表示され続けます。画像は 800px x 300px です - を設定してボックスの幅を 800px に設定slideWidth:800できますが、問題は解決しません。キャプションが切れているのがわかります - 画像が下と右にずれています。

テスト ページを参照してください。これは、変更されていない bxslider のコピーを使用しており、追加の CSS はありません。

どんな助けでも大歓迎です-それは単純なものだと確信していますが、私はまだこれに慣れていません!

4

1 に答える 1

11

画像が大きすぎるため中心からずれており、親から右にはみ出しているため左揃えになっています。あなたが求めているレイアウトを説明してください。さらにお手伝いします. 推測は次のとおりです。

.bx-wrapper img {
    width: 720px;
    height: 230px;
}
.bx-wrapper .bx-caption {
    width: 720px;
}

これを行うこともできます：

.bx-wrapper {
    width: 880px;
}
.bx-viewport {
    height: 340px;
}

コメントに基づいて更新します。

.bx-viewport ul {
  margin: 0;
  padding: 0;
}
于 2013-03-03T02:49:59.670 に答える