0

私はこれに対する答えを見つけるためにあらゆる種類のものを試しましたが、私がやりたいのは、2 つの画像の下にテキストを配置することです。

線に変換して使用しようとしましたが、テキストを画像の中央の下に配置できません。誰でも私を助けることができますか？

ウェブページは www.c5d.co.uk/captain.php です。

HTML は次のとおりです。

 <img class="social" src="http://www.c5d.co.uk/captain.png" alt="Captain">
 <img class="socialtwo" src="http://www.c5d.co.uk/president.png" alt="President">
 <div><ul class="captain"><li><p>John Lewis: Captain</p><p>Bill Wrigley: President</p>             </li></ul></div>
 <img class="social" src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain">
 <img class="socialtwo" src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior  Captain">
 <div><ul class="ladycaptain"><li><p>Beryl Harrison: Lady Captain</p><p>Kieran Metcalf: Junior Captain</p></li></ul></div>

関連するCSSは

 .captain, .ladycaptain {                /* ul - controls normal comp results& junior open*/
list-style-type:none;
display:table;
padding:0;
margin:0 auto;
}
 .captain li, .ladycaptain li {
display:table-row;
text-align:left;/* ul - controls normal comp results& junior open*/
padding:0;
margin:0;
}
  .ladycaptain p  {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0;  /* padding-right visually separates "columns" */
}




 .captain p  {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 10px 3px 0;  /* padding-right visually separates "columns" */
}

 .ladycaptain p  {
display:table-cell;/* ul - controls normal comp results & junior open*/
text-align:left;
padding:3px 20px 3px 0;  /* padding-right visually separates "columns" */
}



.captain p + p {
padding-left:225px;       /* padding-left visually separates "columns" */
}
.ladycaptain p + p {
padding-left:180px;       /* padding-left visually separates "columns" */
}
4

5 に答える 5

0

現在、必要以上の HTML と CSS があり、コードの読み取りと修正が必要以上に難しくなっています。各画像のテキストを独自divに配置すると、画像を中央に配置しやすくなり、達成しようとしているものに意味的に近づきます。次に、はるかに少ない CSS を使用して、必要に応じて動作させることもできます。

HTML と CSS を再構築するとうまくいくはずです。

<html>
<head>
<style>
#officers {
    width:554px;
}

.officer {
    width:267px;
    position:relative;
    float:left;
    text-align:center;
    margin:3px 10px 3px 0;
}

</style>
</head>
<body>
<div id="officers">
    <div class="officer">
        <img src="http://www.c5d.co.uk/captain.png" alt="Captain" />
        <span class="caption">John Lewis: Captain</span>
    </div>
    <div class="officer">
        <img src="http://www.c5d.co.uk/president.png" alt="President" />
        <span class="caption">Bill Wrigley: President</span>
    </div>
    <div class="officer">
        <img src="http://www.c5d.co.uk/ladycaptain.png" alt="Lady Captain" />
        <span class="caption">Beryl Harrison: Lady Captain</span>
    </div>
    <div class="officer">
        <img src="http://www.c5d.co.uk/juniorcaptain.png" alt="Junior Captain" />
        <span class="caption">Kieran Metcalf: Junior Captain</span>
    </div>
</div>
</body>
</html>
于 2013-02-26T21:56:15.253 に答える
0

次のようなことを試してください：

<ul>
    <li>
        <img class="img1" src="" alt="">
        <div>image 1</div>
    </li>

    <li>
        <img class="img2" src="" alt="">
        <div>image 2</div>
    </li>

    <li>
        <img class="img3" src="" alt="">
        <div>image 3</div>
    </li>
    ....
</ul>

CSSで

li
{
  display: inline-block;
    margin: 20px;
}
div
{
 text-align: center;
}

ライブデモはこちら

于 2013-02-26T22:10:06.773 に答える
0

@Rob Grzyb の提案:

画像とキャプションを単一のコンテナー/div にグループ化し、コンテンツを中央に配置してみてください。HTML を再構成できれば、はるかに簡単に実行できます。

@Pow-Ian による提案: jsfiddle.net/KV7zT

私が編集: jsfiddle.net/KV7zT/1 または jsfiddle.net/KV7zT/2/

html

<div style='text-align:center;width:50%;float:left;'>
    <img src="http://www.c5d.co.uk/president.png" alt="President" />
    <div style="clear:both"> Text Goes Here</div>
</div>

CSS

.none-needed {css:not needed 'yet';}
于 2013-02-26T21:59:19.360 に答える
0
  1. 画像の margin-bottom を削除します。
  2. テキストを含む ul の高さを増やします。
  3. その li (または 'em のグループ) の行の高さをその高さに設定します。完全に中心になります。もちろん、それが達成したい場合は、垂直方向に中央に配置されます。それ以外の場合は、 text-align を中央に設定するだけでうまくいくはずです。
于 2013-02-26T22:04:50.733 に答える
0

私はあきらめた ！そして何か違うことを試しました。

テキストの間隔エラーが発生しました。

ご提案いただきありがとうございます

アントニー

于 2013-02-28T05:29:05.417 に答える