Question

我有这个php文件：

<?php header("HTTP/1.0 404 Not Found"); ?>
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>

<br/><br/>

<h1 class="error"><?php echo t('Page Not Found')?></h1>

<?php echo t('We searched but there is no page at this address.')?>

<?php  if (is_object($c)) { ?>
    <br/><br/>
    <?php  $a = new Area("Main"); $a->display($c); ?>
<?php  } ?>

<br/>

<img src="img.jpg">

<br/><br/>

<a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.

并且所有元素都左对齐。我想修改它以保持所有项目彼此左对齐，但将所有项目集中在页面中。

例如，上面的代码：

Some text here.
Some big image here.
Some very very very long button here.

我想要的是：

                        Some text here.
                        Some big image here.
                        Some very very very long button here.

我尝试使用两个嵌套的div标记，如下所示：

<?php header("HTTP/1.0 404 Not Found"); ?>
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>

    <div align="center">
        <div align="left">

        <br/><br/>

        <h1 class="error"><?php echo t('Page Not Found')?></h1>

        <?php echo t('We searched but there is no page at this address.')?>

        <?php  if (is_object($c)) { ?>
            <br/><br/>
            <?php  $a = new Area("Main"); $a->display($c); ?>
        <?php  } ?>

        <br/>

        <img src="img.jpg">

        <br/><br/>

        <a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.
    </div>
</div>

但这没有用（没有改变任何东西 - 在页面上仍然是合理的）。有任何想法吗？它是否可能，或者我是否会遇到浏览器不兼容问题？

Answer 1

 <div id="wrapper">  
<?php header("HTTP/1.0 404 Not Found"); ?>
<?php  defined('C5_EXECUTE') or die("Access Denied."); ?>

<br/><br/>

<h1 class="error"><?php echo t('Page Not Found')?></h1>


<?php echo t('We searched but there is no page at this address.')?>

<?php  if (is_object($c)) { ?>
    <br/><br/>
    <?php  $a = new Area("Main"); $a->display($c); ?>
<?php  } ?>

<br/>

<img src="img.jpg">

<br/><br/>

<a href="<?php echo DIR_REL?>/"><?php echo t('Back to Home')?></a>.
</div><!--end wrapper-->

在你的CSS中

#wrapper{width:800px;margin:0px auto;}

Answer 2

动态包装div CSS：

.wrap img{
  max-width:100%;
  }
.container{
  text-align:center;
  background-color:red;}
.wrap{
  text-align:left;
  display:inline-block;
  margin:0 auto;
  background-color:white;
}

HTML：

 <div class="container"><div class="wrap">
  <div>Hello World!</div>
  <div>Some bigger text</div>
  <div>Some more bigger text</div>
  <div><img src="image.jpg"/></div>
</div>
</div>

你可以在这里看到它： http://cssdesk.com/KqFha

*编辑添加适合屏幕尺寸的图像

PHP或HTML：集中所有内容，但保持彼此左对齐

2 个答案: