Question

我现在试着把桌子放在桌子上，我只能做完了。

由于某些未知原因，margin-right:auto和边距left:auto不会将其置于 DIV 内部！

我让它对移动设备做出了响应＆＃34;丑陋＆＃34;在@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>

Answer 1

将您的#cont更改为：

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

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

适合我：JSFiddle

Answer 2

从float:right移除#cont table。通过将外部区域对齐，将表格对齐到中心，如下所示：

<强> 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%;
 }

CSS - 中心表在一个div + Tables＆＃34; Breaks＆＃34;他的排水平

2 个答案: