1

ほぼそこにある画像の上に中央揃えのキャプションを追加しようとしています。参照：http ： //cssdesk.com/2wreQしかし、テキスト段落（p.wp-caption-text to）を中央に配置する必要があります。それを成し遂げることができず、うまくいけば、誰かがcssまたはjqueryでそれを行うための正しい方向に私を向けることができます。

どんな助けでも大歓迎です。

4

4 に答える 4

3

あなたはそれを必要以上に複雑にしました。そして、jQueryはまったく必要ありません。

実行中の私の提案。.wp-caption要素のインライン幅を削除しました。これは優れた方法ではなく、複雑になるためです。z-index値は必要ありませんposition: absolute。幅が定義されていないため、実際に問題が発生していました。キャプションテキストを画像の中央に配置するには、キャプションテキスト要素が画像の全幅を所有している必要があります。これを追加width: 140px;するだけで達成でき.wp-caption-textますが、その後、他の問題が発生することになります。

を削除するposition: absolute;と、段落は（マージンを適用した後）使用可能な全幅の使用に戻り、text-align: center;適用されたプロパティ.wp-captionがその役割を果たします。マージンとパディングへの変更は、主にCSSを簡素化し、操作を容易にすることでしたが、後で遭遇する可能性のあるいくつかのブラウザーの問題も修正する必要があります。また、物議を醸すようなフォーマットを適用しました。つまり、プロパティを並べ替え、重複を削除し、間隔を追加しました。

HTML

<div id="content">
<div id="attachment_24" class="wp-caption alignnone"><a href="http://zoekmachineoptimalisatielab.nl/wp-content/uploads/2012/05/Koala.jpg"><img class="size-thumbnail wp-image-24" title="Koala" src="http://zoekmachineoptimalisatielab.nl/wp-content/uploads/2012/05/Koala-150x150.jpg" alt="" width="150" height="150" /></a><p class="wp-caption-text">Koala caption</p></div>
</div><!-- .entry-content -->

CSS

#content .wp-caption {
  background: #F1F1F1;
  line-height: 18px;
  margin-bottom: 20px;
  overflow: hidden;
  padding: 9px 0;
  text-align: center;
  width: 168px;
}
#content .wp-caption a {
  display: block;
  margin: 0 9px;
}
#content .wp-caption-text {
  background-color: #FFFFFF;
  border: 1px solid #CACACA;
  color: #888888;
  font-size: 12px;
  font-weight: bold;
  margin: -12px 9px 0;
  padding: 1px 4px;
  position: relative;
}
于 2012-05-28T07:14:00.903 に答える
0

ねえ、私はあなたがこれをすべきだと思います

cssに1つのプロパティを追加します

#content .wp-caption {
position:relative;
}

そして、このcss **#content .wp-caption p.wp-caption-text** をこれに置き換えます

#content .wp-caption p.wp-caption-text {
    background-color: #FFFFFF;
    border: 1px solid #CACACA;
    bottom: 24px;
    color: #888888;
    font-size: 12px;
    font-weight: bold;
    left: 0;
    margin: 0 9px;
    padding: 1px 4px;
    position: absolute;
    right: 0;
    z-index: 9999;
}

こちらのライブデモhttp://jsfiddle.net/seK84/

于 2012-05-28T05:37:37.230 に答える
0

私はあなたがattachment_24の160pxの固定幅を持っていると仮定します。これをCSSに追加します。

p.wp-caption-text{
    width:140px
}
于 2012-05-28T05:43:26.590 に答える
0

正しい方向に私を助けてくれたみんなに感謝します。これは私が念頭に置いていたものです：http：//cssdesk.com/tVpxKそしてあなたの助けのおかげで私はそれを機能させました。

于 2012-05-28T10:26:43.337 に答える