相关疑难解决方法(0)

我在CSS方面非常精通,但今天我偶然发现了一个令我头疼的片段(这里和这里).

我从来不认为我们可以通过中心绝对定位的元素margin: 0 auto,但鉴于问题的元素有一组宽度,还有的left: 0和right: 0,它实际上似乎工作:

#parent
{
    background: #999;
    height: 300px;
    position: relative;
    width: 300px;
}

#child
{
    background: #333;
    height: 50px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 50px;
}

<div id="parent">
    <div id="child"></div>
</div>

(JSFiddle)

我一直以为left: 0和right: 0将决定元素的宽度(它100%的第一个相对定位的父),但似乎width这里的优先级,因此使得margin: 0 auto工作.

这是定义的行为吗？我可以在任何规格中找到它的相关信息吗？我google了一下,但没有任何用处.

所以我有这两张桌子

    <table  id="pointsTable" >
          <th> One </th>                                           
          <th> Two </th>                               
          <th> Three </th>
          <tr>
           <td  id="one" ></td>               
           <td  id="two"></td>              
           <td  id="three"></td>                            
          </tr>
    </table>                                                                            

   <table id="pointsTableSmall" style="text-align: center;">
          <tr>
             <th> One </th>
          </tr>
          <tr>
          <td  id="one"></td>
          </tr>
          <tr>
          <th>Two </th>
          </tr>
          <tr>
          <td  id="two" ></td>
          </tr>
          <tr>
          <th>Three</th>
          </tr>
          <tr>
          <td  id="three" ></td>
          </tr>
   </table>

第一个在大屏幕中可见,第二个在较小的屏幕中可见.

他们的CSS是

#pointsTable, #pointsTableSmall{
    border: 0;
    border-style: 0;   
    margin: auto !important;
    padding: auto;
    text-align: center !important;    

} 

他们的包裹div有

#pointWrap{
    text-align: center;
} 

在Firefox 45.0.1中,表格左对齐,边距为:auto且无填充.左侧对齐间隙与其容器之间的右侧有间隙div. …

我有一个包含复选框的特定行的表.我希望这些复选框与父td的中心对齐.我知道我可以通过样式化父td来实现这一目标:

td {
    text-align: center;
}

我也知道我可以用jQuery轻松实现这一点,但不幸的是,我不能使用jQuery.

该表是通过.NET创建的,我不能通过给出某个类来定位包含复选框的特定列.

我想知道是否有一种方式来设置复选框本身,以便将其与其父级td的中心对齐.

就像是:

input[type=checkbox] {
    margin: auto;
}

我应该何时使用margin-left:auto; margin-right:auto中心,何时使用margin-left:50%; margin-right:50%？

也许是"auto",当我在另一个元素中包含的内容时,当我以页面为中心时,50%？

或者我只是无可救药地困惑？

到目前为止，我一直在尝试创建这张图片中显示的基本网站布局。 https://imgur.com/a/JhURder

它包括一个灰色背景，里面有一个带有白色背景的居中 div。将图像居中左侧，文本等居中右侧。

我是 twitter bootstrap 的大力倡导者，到目前为止我已经实现了这一点。（反应风格）

            <div class="container-fluid" style={{
                'background-color' : 'rgb(224,225,226)',
                'height' : '40vh'
            }}>
                <div class="row">
                    <div class="col-1 text-center"> Test </div>

                    <div class="col-10 text-center" style={{
                        'height' : '30vh',
                        'background-color' : 'rgb(255,255,255)',
                        'margin-top' : '5vh'
                    }}>

                    centered

                    </div>

                    <div class="col-1 text-center">test</div>
                </div>
            </div>

到目前为止，它已经进行了一半。但老实说，我有点给了我们，因为它变成了一个嵌套的烂摊子。随着网站开发，我一直知道他们是一个更大的方式，所以我来这里是为了让人们对我的尝试进行迄今为止的尝试，并可以以适当的方式给我实现我的目标。