header 中的中心图像

Question

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

<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

您应该将 class 作为 'topImage' 添加到图像中，并将以下 css 添加到您的 css 文件中：

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

Answer 3

在您的站点示例中，您有 body, table.body, h1, h2, h3, h4, h5, h6, p, td 和属性 text-align:left。并从您的 img class 中删除 display: block; float: left;。

Note that if you will make text-align:center it will affect the whole form. so make another class for it.

Answer 4

从中删除宽度部分 css:

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

header 中的中心图像

center image in header

html

css

zurb-foundation