个人中心
gpt4 book ai didi

html - 表格未在浏览器中居中，使用 HTML 和 CSS

转载 作者：太空宇宙 更新时间：2023-11-04 03:18:00 25 4
gpt4 key购买 nike

我无法让表格在浏览器中居中。请查看我的代码，让我知道需要更改的内容。非常感谢。我查看了所有内部样式表以及放在表格标签上的内联。我有另一个编码相同且相似的网页，我看不出有任何差异，它也不居中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

    <title>Pie Crust Recipe | Pies by Grandma Reeves</title>
    <meta name="author" content="Jaeden Kimball Harris"/>
    <meta name="keywords" content="'Applie pie',Filling, Delicious,'Grandma Reeves', Recipe"/>
    <meta name="description" content="Come enjoy a hot applie pie, perfect for the fall season or any season really. Straight out of Grandma Reeves kitchen!"/>

<style type="text/css" media="all">

    body{
    background-color: #FEFACB;
    background-image: url("images/lemonbackground.jpg");
    text-align:center;
    }

    h1 {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:24px;
    text-align:center;
    }

    h2 {
    font: 'Comic Sans', times, serif;
    color: #FDC62D;
    font-size:20px;
    }

    table{
    background-color:#ffffff;
    text-align:center;
    width:850px;
    height:800px;
    }

    td{
    vertical-align:top; padding:15px;
    }

    table.center (
    margin-left:auto;
    margin-right:auto;

    )

    ul {
    list-style-type:square
    }

    </style>



</head>

<body>

<table class="center">

<tr>
  <td>

<table class="center" style="width:85%;" />
    <tr>
      <td>
      <a href="piefilling.html"><img src="images/filling_smnav.gif" width="154" height="143" alt="Click here for the lemon meringue pie and filling recipes"></img></a>
      </td>
      <td>
      <a href="crust.html"><img src="images/crust_smnav.gif" width="154" height="143" alt="Click here for the flaky crust recipe"></img></a>
      </td>
      <td>
      <a href="index.html"><img src="images/sm_logo.gif" width="312" height="183" alt="Lemon Meringue Pie recipe from Grandma Reeves"></img></a>
      </td>   
    </tr>

    <tr>
      <td colspan="3">
      <p style="text-alight:center;"><img src="images/yellowbar.gif" width="636" height="8" alt="red bar"></img></p>
      <h1> Pie Crust Recipe </h1>
      <h2> Ingredients</h2>

      <ul>
        <li>2 Cups flour</li>
        <li>1 Cup Butter Flavor Crisco brand shortening</li>
        <li>1 tsp salt</li>
        <li>1 tsp sugar</li>
        <li>1/4 tsp baking powder</li>
        <li>1/3 Cup milk</li>
      </ul>
      <blockquote>
        <p> Stir until lumps are dissolved (can use a hand mixer) </p>
      </blockquote>

      <h2>Bring to a Boil</h2>
      <ul>
         <li>4 cups water</li>
         <li>2 cups sugar</li>
      </ul>

     <h2> Directions </h2>
     <p> Add all dry ingredients together.</p>
     <p>Use two knives and criss cross them to cut the Butter Flavor Crisco® into the flour mixture. Cut it into the flour until the mixture is tiny crumbs.</p>
     <p>Sprinkle milk over top of the mixture and gently fold the milk into the mixture, not handling it.</p>
     <p>Spread some flour on the counter and place 1/2 of the mixture on the flour. Lightly flour the rolling pin. Roll out thin. The secret avoid handling and try to only roll it out once.</p>
     <p>Carefully place the dough in the pie pan (folding it in 1/2 first sometimes helps)</p>
     <p>Flute the edges (pinching the edges with your thumb and index finger).</p>
     <p>Bake 400° for 10-12 minutes (until lightly brown)</p>


  </td>
    </tr>
</table>    
     </td>
   </tr>
</table>   

</body>
</html>

最佳答案

将此添加到您的表格 css:

table
{
    margin: 0 auto;
}

fiddle ，如果需要的话:http://jsfiddle.net/vvov1y8q/

关于html - 表格未在浏览器中居中，使用 HTML 和 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28390728/

25 4 0
文章推荐： html - 避免规范化 css 的潜在陷阱？
文章推荐： c - 未知类型输入 - windows.h
文章推荐： python - 如何使用 MATPLOTLIB 设置标签？
文章推荐： c - POSIX pthread_join 在数千个线程后挂起
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com