Question

我有这段代码

<?php
 echo '<p style="text-align: center;"><a href="tran.php?page=A"><img src="tran.png"/></a></p>';
 echo '<p style="text-align: center;"><a href="course_list.php?page=A"><img src="courselist.png"/></a></p>';
?>

但是当我运行它时，请向我展示这些图标（图片）像这样

                                       ICON1  

                                       ICON2

我如何能够像这样彼此相邻，我希望图标仍然在页面中间。

                                   ICON1   ICON2

Answer 1

您可以通过使用显示内联和边距自动分配来轻松实现！

CSS：

.imgcenter {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    height: 30px; 
}
#images{
   text-align:center;
}

HTML

<div id="images">
    <a href="tran.php?page=A">
        <img class="imgcenter" border="0" alt="Mail" src="http://megaicons.net/static/img/icons_sizes/8/178/512/social-networks-instagram-icon.png"/>
    </a>
    <a href="course_list.php?page=A">
        <img class="imgcenter" border="0" alt="Facebook" src="http://megaicons.net/static/img/icons_sizes/8/178/512/social-networks-instagram-icon.png"/>
    </a>
</div>

运行示例： http://jsfiddle.net/X3b5g/389/

Answer 2

删除p标签。或者css他们的风格=＆＃34;显示：内联＆＃34;

含义：

<p style="display:inline">.... rest of code

但除非需要p标签，否则您可以删除它，只需使用中心标签

Answer 3

使用一个p代码。

<?php
 echo '<p style="text-align: center;"><a href="tran.php?page=A"><img src="tran.png"/></a> ';
 echo '<a href="course_list.php?page=A"><img src="courselist.png"/></a></p>';
?>

如何在侧面html标签的中心相邻制作图片

3 个答案: