Question

我已尝试各种方法来找到答案，但我想要做的是将一些文字置于两个图像的中心。

我尝试过使用变成一行，但我无法将文本置于图像的中心。任何人都可以帮助我吗？

网页是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" */
}

Answer 1

现在你有比你需要的更多的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>

Answer 2

@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';}

Answer 3

删除图像的边距底部。
增加包含文字的ul的高度。
将该li（或一组'em）的行高设置为该高度。它将完美地居中。那当然它将垂直居中，如果这是你想要实现的。否则只需将text-align设置为center即可。

Answer 4

尝试这样的事情：

<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;
}

这是LIVE DEMO

Answer 5

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

现在只是出现文字间距错误！

感谢您的所有建议

安东尼

如何在两个图像下定位文本

5 个答案: