将图像 img 与框中的文本对齐答案

【问题标题】：Align image img with text in box将图像 img 与框中的文本对齐
【发布时间】：2011-11-04 01:27:08
【问题描述】：

编辑：这要归功于“olly_uk”

EDIT2： 现在可以了，但是框的对齐方式是错误的。您可以查看截图HERE。如果没有任何文本，它将与每行上的 2 个框完美对齐，并且彼此之间保持完美的距离，但如果有文本，它会在彼此下方呼应。为什么？

我正在尝试回显图像，然后在该图像中我想回显数据库中的文本。好吧，它与图像相呼应（3，因为我在数据库中只有 3 个产品示例），但产品在框中没有对齐。它在它之下。我在谷歌上搜索过，但找不到任何东西

是否甚至可以使用例如margin-top 移动张贴的回声，以便我可以在框中对齐它？

我想在 PHP 中使用样式或类...

示例图片：IMAGE

添加<style>p{...};h3{...};</style> 工作

代码示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BOX</title>
<link href="includes/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<style>
    p {
    position:relative;
    top:-240px;
    left:180px;
    }
    h3 {
    position:relative;
    top:-270px;
    left:30px;
    }
</style>
</head>

<?php
    include 'includes/connection.php';

    $query = "SELECT * FROM products";

    $result = mysql_query($query);
?>

<body>

<div class="header navpos c1" id="nav">
            <table summary="header" border="0">
                <tr>
                    <td>
                        <ul>
                            <li class="home"><a href="index.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="about"><a href="about.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="contact"><a href="contact.html"></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="twitter"><a href="index.html"><img src="includes/images/f_logo.png" alt="** PLEASE DESCRIBE THIS IMAGE **" /></a></li>
                        </ul>
                    </td>
                    <td>
                        <ul>
                            <li class="facebook"><a href="index.html"><img src="includes/images/t_logo.png" alt="link to Syndicate Plus Twitter" /></a></li>
                        </ul>
                    </td>
                </tr>
            </table>
    </div>

<div class="offers">
    <div class="content_box">
        <?php
            while($products = mysql_fetch_array($result)) {
                echo '<img src="includes/images/content_box.png" border=0 />';
                echo "<h3>" . $products['products'] . "</h3>";
                echo "<p>" . $products['description'] . "</p>";
            }   
        ?>
    </div>
</div>
</body>
</html>

【问题讨论】：

你到底想做什么？是否要将图像并排显示？
这与 PHP 无关，只是您使用 PHP 生成一些 html。这是一个 html 布局问题，我不知道您到底要完成什么。什么是<hp> 标签？
我编辑了标签，它应该是
标签。我上传了一个示例图片，有问题的链接。

标签： php html css image alignment

【解决方案1】：

我认为您可以使用 CSS 来实现这一点。通过使用负顶部将文本凸出图像顶部。我回家后会尝试给出一些示例代码。

同时检查一下，w3schools CSS-positioning

希望有所帮助

编辑：添加代码以显示我的意思

<html>
<head>
    <title>text over image</title>
    <style>

        p {
        position:relative;
        top:-200px;
        }
        h2 {
        position:relative;
        top:-140px;
        }
    </style>
<head>
<body>
    <img src="/images/office1.jpg" alt="demo image"/>
    <h2>test text</h2>
    <p>test desciption text</p>
    <hr/>
    <img src="/images/office1.jpg" alt="demo image"/>
    <h2>test text</h2>
    <p>test desciption text</p>
</body>

【讨论】：

非常感谢，它成功了。与“
”和“

”交互。这看起来很明显。谢谢！我会给你一个有用的观点，但我不允许。
你好，你能再帮帮我吗？盒子没有对齐好...您可以看到问题中发布的屏幕截图..谢谢

”和“