使用materializecss将图像与各个表对齐

时间:2016-02-08 16:55:49

标签: html css

在此处查找完整代码:http://codepen.io/anon/pen/NxErrR

我正在尝试显示不同的表格及其各自的图像。以下是实际要求的屏幕截图。这是要求。

One

这就是我取得的进展。

Two

注意:我正在使用materializecss,并且很高兴使用相同的方法实现这一目标。

   <div class="row">
     <div class="featuresanimate">
       <div id="features" class="section scrollspy">
         <div class="container">
           <h2 style="text-decoration:underline;text-align:center;font-  weight:bold;font-family:Comic Sans MS">Features</h2><br><br>
             <div class="features">
               <table style="width:100%">
                 <tr>
                   <img src="images/d.png" height="100" width="100">
                   <th >one</th>
                   <img src="images/a.png" height="100" width="100">
                   <th >two</th>
                 </tr>

                 <tr>
                   <td >profile</td>
                   <td >profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                 <tr>
                   <td>profile</td>
                   <td>profile</td>
                 </tr>

                 <tr>
                  <td>profile</td>
                  <td>profile</td>
                 </tr>

                </table>          
             </div> 
           </div>
        </div>
      </div>
    </div>

2 个答案:

答案 0 :(得分:1)

您可以将它们分开div s

除非您出于某种原因需要使用表格?

http://codepen.io/anon/pen/VeVjgL

答案 1 :(得分:1)

看起来你正在使用Materialize CSS框架。我会抛弃table-for-layout方法并使用框架提供的grid system。请参阅working Codepen demo here

DataSet
grid.DataSource = _gridData.Tables(0) 
(where grid is the DataGridView and _gridData is the DataSet)