Question

我目前正在基础框架中编程。但是我无法理解为什么yelllow菜单栏中的图片是左对齐的？我希望图片能够居中。我已经尝试了文档中的所有内容，但这对我不起作用。有人有其他建议吗？

<body>
  <table class="body">
    <tr>
      <td class="center" align="center" valign="top">
        <center>

          <table class="row" style="background-color:yellow;">
            <tr>
             <td class="center" align="center">
             <center>
              <table class="container">
                <tr>
                  <td class="wrapper last">
                    <table class="twelve columns">
                      <tr>
                        <td>
                          <img width="250" height="80" src="http://placehold.it/580x300">
                        </td> 
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </center>
          </td>
        </tr>
      </table>
      <br>

      <table class="container">
        <tr>
          <td>
            <!-- content start -->
            <table class="row">
              <tr>
                <td class="wrapper last">
                  <table class="twelve columns">
                    <tr>
                      <td>
                        <h1>Hi, Elijah Baily</h1>
                        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
                        <img width="580" height="300" src="http://placehold.it/580x300">

                      </td>
                      <td class="expander"></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      </center>
    </td>
  </tr>
</table>

Answer 1

查看您的网站示例，<img>元素具有以下样式：

 img {
    display: block;
    float: left;
 }

这两种风格都会导致这种行为。首先，display: block使图像元素占据其容器的整个宽度，即使图像本身没有。其次，float: left将图像移动到其容器的左侧。

删除这两种样式，图像将居中。

Answer 2

在您的网站示例中，您拥有body, table.body, h1, h2, h3, h4, h5, h6, p, td，其中包含属性text-align:left。并从你的img类中删除display: block; float: left;。

请注意，如果您将text-align:center，则会影响整个表单。所以为它做另一个课程。

Answer 3

从此css：

中删除宽度部分

table.container {
    /*width: 580px;*/
    margin: 0 auto;
    text-align: inherit;
}

Answer 4

您应该添加一个类作为＆＃39; topImage＆＃39;到图像并将以下css添加到您的css文件中：

.topImage {
  float: none;
  margin: 0 auto;
}

标题中的中心图像

4 个答案: