0

我已经尝试了各种方法来找到这个问题的答案，但我想要做的是在两个图像下居中放置一些文本。

我尝试使用变成一条线，但我无法让文本位于图像的中心下方。谁能帮我 ？

网页是 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
  1. 删除图像的边缘底部。
  2. 增加包含文本的 ul 的高度。
  3. 将该 li （或一组 'em ）的 line-height 设置为该高度。它将完全居中。当然，如果这是您想要实现的，它将垂直居中。否则，只需将 text-align 设置为 center 就可以了。
于 2013-02-26T22:04:50.733 回答
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

现在，您拥有的 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

我放弃 ！并尝试了一些不同的东西。

现在只是有一个文本间距错误！

感谢您的所有建议

安东尼

于 2013-02-28T05:29:05.417 回答
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 回答