Css 将四个不同的div垂直居中放置在一个div内_Css_Html_Alignment

Css 将四个不同的div垂直居中放置在一个div内

css html

Css 将四个不同的div垂直居中放置在一个div内,css,html,alignment,Css,Html,Alignment,我有四个div，每个div都是一列多行的表。它们都以相对位置向左浮动，因此都是一行。我想将它们垂直居中放置在div“container”中。我该怎么做 <!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"&

我有四个div，每个div都是一列多行的表。它们都以相对位置向左浮动，因此都是一行。我想将它们垂直居中放置在div“container”中。我该怎么做

<!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=utf-8" />
<title>Untitled Document</title>
</head>
<style type="text/css">
.titlefont{
font-family:"Lucida Console", Monaco, monospace;    
}

div#saucelistdiv{
float:left;
    width:auto;
    margin:10px;
    vertical-align:middle;
    height:auto;
}
div#meatlistdiv{
    float:left;
    width:auto;
    margin:10px;
    vertical-align:middle;
    height:auto;
}
div#container{
    height:600px;
    border:2px solid red;
    width:auto;
}
#grainlistdiv{
float:left;
    width:auto;
    margin:10px;
    vertical-align:middle;
    height:auto;
}
div#veggielistdiv{
    float:left;
    width:auto;
    margin:10px;
    vertical-align:middle;
    height:auto;
}
#tablelist{
    border:2px solid;
}
</style>
<body>

<center>
<div id="container">
<div id="saucelistdiv"><table id="tablelist">
    <span class="titlefont">SAUCES</span>
    <tr><td><input type="radio" name="rbbase" value="Pizza Sauce" checked="checked" />Pizza Sauce</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Cheese Sauce" />Cheese Sauce</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Barbecue Sauce" />Barbecue Sauce</td></tr>



    <tr><td><input type="radio" name="rbbase" value="Salsa" />Salsa</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Alfredo Sauce" />Alfredo Sauce</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Taco Sauce" />Taco Sauce</td></tr>



    <tr><td><input type="radio" name="rbbase" value="Tzatziki (Cucumber) Sauce" />Tzatziki (Cucumber) Sauce</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Chicken Gravy" />Chicken Gravy</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Beef Gravy" />Beef Gravy</td></tr>



    <tr><td><input type="radio" name="rbbase" value="Ranch Dressing" />Ranch Dressing</td></tr>
    <tr><td><input type="radio" name="rbbase" value="1000 Island Dressing" />1000 Island Dressing</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Parmesan Peppercorn Dressing" />Parmesan Peppercorn Dressing</td></tr>



    <tr><td><input type="radio" name="rbbase" value="Spaghetti Sauce" />Spaghetti Sauce</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Chili" />Chili</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Syrup" />Syrup</td></tr>



    <tr><td><input type="radio" name="rbbase" value="Garlic Butter" />Garlic Butter</td></tr>
    <tr><td><input type="radio" name="rbbase" value="Mayonnaise" />Mayonnaise</td></tr>





    </table>
    </div>

<div id="meatlistdiv">
<span class="titlefont">MEATS</span>
    <table class="center" id="tablelist">



      <tr><td><input type="checkbox" name="cbing" value="Sausage" />Sausage<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Pepperoni" />Pepperoni<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Diced Ham" />Diced Ham<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Beef" />Beef<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Bacon" />Bacon<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Lamb" />Lamb<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Bratwurst" />Bratwurst<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Chicken" />Chicken<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Shrimp" />Shrimp<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Crab" />Crab<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Seasoned Beef" />Seasoned Beef<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Corned Beef" />Corned Beef<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Turkey" />Turkey<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Eggs" />Eggs<br /></td></tr>




    </table>
  </div>

  <div id="grainlistdiv">
  <span class="titlefont">GRAINS</span>
    <table class="center" id="tablelist">
      <tr><td><input type="checkbox" name="cbing" value="Elbow Macaroni" />Elbow Macaroni<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Spaghetti Noodles" />Spaghetti Noodles<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Oyster Crackers" />Oyster Crackers<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Goldfish" />Goldfish<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Mini Pancakes" />Mini Pancakes<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Pretzels" />Pretzels<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Stuffing" />Stuffing<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Taco Chips" />Taco Chips<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Ramen Noodles" />Ramen Noodles<br /></td></tr>
    </table>
  </div>

    <div id="veggielistdiv">
    <span class="titlefont">VEGGIES/OTHER</span>
    <table class="center" id="tablelist">
      <tr><td><input type="checkbox" name="cbing" value="Lettuce" />Lettuce<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Tomatoes" />Tomatoes<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Onions" />Onions<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Green Peppers" />Green Peppers<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Green Olives" />Green Olives<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Black Olives" />Black Olives<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Pineapple" />Pineapple<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Sauerkraut" />Sauerkraut<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Broccoli" />Broccoli<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Cauliflower" />Cauliflower<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Jalapeno Peppers" />Jalapeno Peppers<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Pickles" />Pickles<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Cucumbers" />Cucumbers<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Carrots" />Carrots<br /></td></tr>
      <tr><td><input type="checkbox" name="cbing" value="Mushrooms" />Mushrooms<br /></td></tr>
    </table>
  </div>


     </div>
</body>
</html>


无标题文件
titlefont先生{
字体系列：“Lucida控制台”，摩纳哥，monospace；
}
迪夫#索塞利斯特迪夫{
浮动：左；
宽度：自动；
利润率：10px；
垂直对齐：中间对齐；
高度：自动；
}
部门#肉类列表部门{
浮动：左；
宽度：自动；
利润率：10px；
垂直对齐：中间对齐；
高度：自动；
}
分区#集装箱{
高度：600px；
边框：2倍纯红；
宽度：自动；
}
#粒状物{
浮动：左；
宽度：自动；
利润率：10px；
垂直对齐：中间对齐；
高度：自动；
}
部门#蔬菜列表部门{
浮动：左；
宽度：自动；
利润率：10px；
垂直对齐：中间对齐；
高度：自动；
}
#表格{
边框：2倍实心；
}
酱汁
披萨酱
奶酪酱
烤肉酱
萨尔萨
阿尔弗雷多沙司
塔可酱
Tzatziki（黄瓜）酱
鸡肉肉汁
牛肉汁
牧场调料
1000岛屿敷料
帕尔马胡椒调味汁
意大利面酱
辣椒
糖水
大蒜黄油
沙拉酱
肉类
香肠

辣香肠

火腿丁

牛肉

培根

羔羊肉

香肠
鸡肉

虾

螃蟹

调味牛肉

咸牛肉

土耳其

鸡蛋

谷物
肘部通心粉

意大利面条

牡蛎饼干

金鱼

迷你煎饼

椒盐卷饼

填料

墨西哥玉米片

拉面

蔬菜/其他
生菜

西红柿

洋葱

青椒

绿橄榄

黑橄榄

菠萝
酸菜

西兰花

花椰菜

墨西哥胡椒

泡菜

黄瓜

胡萝卜

蘑菇

垂直对齐仅适用于表格。所以可以使用div作为表，通过这种方式：

div#container
{
    height: 600px;
    border: 2px solid red;
    width: auto;
    //add these rows
    display: table-cell; 
    vertical-align: middle;
}

我相信如果你改变你的

float:left至显示：内联块然后您将获得您想要的效果。
您还可以使用一点javascript（这使用JQuery）来实现这一点：
如果为div#容器指定宽度大小并将边距设置为“自动”，则它应该可以工作：
div#container{
    height:600px;
    border:2px solid red;
    width:700px;
    margin:auto;
}

*编辑-嗯，我不确定我是否真的理解了这个问题，但它确实让它看起来很漂亮：-）
div#container{
    height:600px;
    border:2px solid red;
    width:700px;
    margin:auto;
}