CSS - A div + Tables 中的居中表格“打破”他的行水平答案

【问题标题】：CSS - Center Tables inside A div + Tables "Breaks" his Row HorizontalCSS - A div + Tables 中的居中表格“打破”他的行水平
【发布时间】：2014-09-26 20:40:10
【问题描述】：

我现在正在尝试将桌子居中放置好几天，但我就是无法完成。

由于某种未知原因，margin-right:auto 和边距 left:auto 不会在 DIV 内居中！

我使用@media 的特定边距使其对移动“丑陋”的方式做出响应，哈哈。它应该很简单，但我只是不明白为什么它不会自行居中并做出响应。

另一个问题-应该很简单。

如果我在表格上方添加图像，它会分解表格，因此看起来像这样：

IMG
        TABLE   TABLE 
TABLE

有什么建议吗？

有什么建议吗？这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">


table{
    text-align: center;
display:inline-table;
max-width: 33%;
height: 300px;
    background-color: white;
    margin: 15px;
    border-collapse: collapse;

}
td,tr{

   padding: 0;
    vertical-align: middle;
   }
table img{

    max-height: 100%;
    max-width: 100%;
}

#cont table
{
margin-left:auto;
margin-right:auto;
 max-width:300px;
 float: right;



}
#cont
{
margin-left:auto;
margin-right:auto;

max-width: 100%;


}
tr > td 
{

padding-bottom: 0.5em;


}
@media only screen and (max-width: 480px) {
 #cont
 {


    margin:60px;
 }


    }
</style></head>

<body>

<div id="cont">
<table>
    <tr>
        <td>
            <img src="2.jpg"/>
        </td>
    </tr>
   <tr>
    <td>

 a
    </td>


   </tr>
    <tr>
    <td>

        a
    </td>


   </tr>
    <tr>
    <td>
        a

    </td>


   </tr>
</table>
<table>
    <tr>
        <td>
            <img src="2.jpg"/>
        </td>
    </tr>
   <tr>
    <td>

a   </td>


   </tr>
    <tr>
    <td>

        a
    </td>


   </tr>
    <tr>
    <td>
 a          
    </td>


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

 a      </td>


   </tr>
    <tr>
    <td>

a   </td>


   </tr>
    <tr>
    <td>
a           </td>


   </tr>
</table>
</div>
</body>

</html>

【问题讨论】：

margin: auto; 不适用于display: inline-table。无论如何你为什么需要inline-table？只需删除此行并再次检查。我不确定您到底想达到什么目标，但是如果您希望 3 个表格彼此相邻并居中，请离开 inline-table 并尝试将 text-align: center 添加到 #cont
嗯由于某种原因它不起作用..你如何记住所有这些规则？哈哈，有时我只是忘记了
嗯，这是练习，我不记得所有内容，但我知道我可以在哪里查找它；-) 尝试对 CSS 有一个深入的了解，它会起作用。例如，在当前情况下，请确保您了解块级元素和内联元素之间的区别。
太棒了！你可能有Skype，我可以问你一些问题，其他人不会有足够的知识？这一定非常棒！ :)

标签： html css html-table center

【解决方案1】：

从 #cont table 中删除 float:right 。通过像这样将外部块居中对齐表格以居中：

Demo

CSS：

  table {
    max-width: 33%;
    height: 300px;
    background-color: white;
    margin: 15px;
  }
 #cont table { 
    display:inline-block;
    max-width:300px;
    text-align: center;
  }

#cont {
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    max-width: 100%;
 }

【讨论】：

有效！唯一的就是当我将窗口大小减小到手机大小时，照片下方的所有文字都消失了，这是为什么呢？但它的工作很棒谢谢你！
可能是你有 #cont { margin:60px; } 在媒体查询中.. 只需减少边距.. 这可能会解决您的问题 :)

【解决方案2】：

将您的 #cont 更改为：

#cont {
    margin-left:auto;
    text-align:center; /*text-align:center here*/
    margin-right:auto;

    max-width: 100%;
    /*Removed the float:right;*/
}

为我工作：JSFiddle

【讨论】：

这也行得通！谢谢你们两个人，你们真棒！