問題多立式引導表上的垂直對齊

Question

我知道這是一個真正的新手問題，但我正在爲inlaws創建一個簡單的響應式網站:)（試圖獲得布朗尼點）和我有垂直對齊文本在多個表上，以便所有表上的所有副本對齊。

正如您從下面的代碼中可以看到的那樣，我爲每個菜單標題都有多個表格，並且當前文本遍佈各處。

任何幫助，您可以給將是巨大的:)

/* -- custom css for Bootstrap 3.x --*/ 
 

 
/* move special fonts to HTML head for better performance */ 
 
@import url(http://fonts.googleapis.com/css?family=Voltaire); 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family:Arial,sans-serif; 
 
} 
 

 
/* fix bs3 horizontal scrollbar bug */ 
 
.row { margin: 0; padding: 0 } 
 

 

 
/* use special fonts in certain elements */ 
 
h1,h2,h3,h4,.lead,.btn,.navbar a { 
 
    text-transform:uppercase; 
 
    font-family:'Voltaire',Arial,sans-serif; 
 
    letter-spacing:2px; 
 
} 
 

 
h1 { 
 
    font-size:50px; 
 
} 
 

 
/* make images gray */ 
 
img.grayscale { 
 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ 
 
    filter: gray; /* IE6-9 */ 
 
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
 
} 
 

 
.icon-bar { 
 
    background-color:#fff; 
 
} 
 

 
.scroll-down a, .scroll-top a { 
 
    color:#ffffff; 
 
} 
 

 
.scroll-down { 
 
    position:fixed; 
 
    bottom:20%; 
 
    right:0%; 
 
    color:#f9f9f9; 
 
} 
 

 
.scroll-top { 
 
    background-color:#dbdbdb; 
 
} 
 

 
.vert { 
 
    vertical-align: middle; 
 
    width:100%; 
 
    padding-top:4%; 
 
    text-align:center; 
 
} 
 

 
.header .btn-lg { 
 
    font-size:28px; 
 
    border-color:#eeeeee; 
 
    padding:15px; 
 
    background-color:transparent; 
 
    color:#ffffff; 
 
} 
 

 
.header .btn-lg:hover { 
 
    background-color:#eeeeee; 
 
    color:#777777; 
 
} 
 

 
.navbar a { 
 
    color:#fff; 
 
    font-size:14px; 
 
} 
 

 
.navbar-bold.affix { 
 
    background-color:#d46054; 
 
} 
 

 
.navbar-bold { 
 
    background-color:#f58076; 
 
    font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; 
 
} 
 

 
.navbar-bold li a:hover, .navbar-bold li.active { 
 
    background-color:#d46054; 
 
} 
 

 
    
 
.header h1 { 
 
    font-size:80px; 
 
    -webkit-text-stroke: 1px rgba(f,f,f,0.1); 
 
    color:#431a6d; 
 
    color:#fff; 
 
    margin-left:-5px; 
 
    margin-bottom:5px; 
 
    text-transform:uppercase; 
 
} 
 

 
.header .lead { 
 
    color:#d46054; 
 
    font-size:25px; 
 
} 
 

 
.header { 
 
    height: 80%; 
 
    background: #000000 url('file:///Volumes/Macintosh%20HD/Users/Azza/Downloads/JU51oUMIye/images/food.jpg') center center fixed; 
 
} 
 

 
/* use alt in navbar and header for different color */ 
 

 
.alt { 
 
    background-color: #000000; 
 
} 
 

 
.alt .lead { 
 
    color: #000000; 
 
} 
 

 
.alt.affix { 
 
    background-color:#4C06AB; 
 
} 
 

 
.alt li a:hover, .alt li.active { 
 
    background-color:#5D17BA; 
 
} 
 

 

 

 
.blurb { 
 
    padding: 120px 0; 
 
    background-color:#fefefe; 
 
} 
 

 
.blurb .panel { 
 
    background-color:transparent; 
 
} 
 

 
.bright { 
 
    background: #dbdbdb url('images/food.jpg') repeat center center fixed; 
 
    color:#777; 
 
} 
 

 
.featurette { 
 
    background: #222334; 
 
    padding: 50px 0; 
 
    color: #ffffff; 
 
} 
 

 
.featurette-item { 
 
    margin-bottom: 15px; 
 
} 
 

 
.featurette-item > i { 
 
    border: 3px solid #ffffff; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    font-size: 56px; 
 
    width: 140px; 
 
    height: 140px; 
 
    line-height: 136px; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.featurette-item > i:hover { 
 
    font-size: 68px; 
 
} 
 

 
.callout { 
 
    color: #ffffff; 
 
    padding-top:7%; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url('http://www.bootply.com/assets/example/bg_suburb.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
.gallery { 
 
    padding: 50px 0; 
 
} 
 

 
.call-to-action { 
 
    background: #eeeeee; 
 
    padding: 50px 0; 
 
} 
 

 
.call-to-action .btn { 
 
    margin: 10px; 
 
} 
 

 
footer { 
 
    padding: 100px 0; 
 
} 
 

 
/* -- end custom css for Bootstrap 3.x --*/

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12 text-center"> 
 
     <h1>Menu</h1><br> 
 
     
 
     <h2>Starters</h2> 
 
     
 
     <div class="table-responsive"> 
 
\t \t \t <table class="table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Number</th> 
 
\t \t \t \t \t \t <th>Description</th> 
 
\t \t \t \t \t \t <th>Allergies</th> 
 
\t \t \t \t \t \t <th>Price</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>1.</td> 
 
\t \t \t   <td>Prawn Cocktail</td> 
 
\t \t \t   <td>Fish</td> 
 
\t \t \t   <td>£2.60</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>4.</td> 
 
\t \t \t   <td>Chicken and Sweetcorn Soup</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£2.10</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>5.</td> 
 
\t \t \t   <td>Chicken and White Mushroom Soup</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£2.10</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>6.</td> 
 
\t \t \t   <td>Sesame Prawn on Toast</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.20</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7.</td> 
 
\t \t \t   <td>Yuk Sung</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£6.50</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7a.</td> 
 
\t \t \t   <td>Hot and Sour Soup</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£2.60</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7c.</td> 
 
\t \t \t   <td>1/4 Aromatic Duck</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£8.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7c.</td> 
 
\t \t \t   <td>1/2 Aromatic Duck</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£15.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7c.</td> 
 
\t \t \t   <td>Whole Aromatic Duck</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£24.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7d.</td> 
 
\t \t \t   <td>Chicken Wings with Peking Sauce</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.20</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7e.</td> 
 
\t \t \t   <td>Chicken Wings with Satay Sauce</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.20</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7f.</td> 
 
\t \t \t   <td>Chilli and Salted Chicken Wings</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.20</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7g.</td> 
 
\t \t \t   <td>Chicken Skewer with Satay Sauce</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£5.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7h.</td> 
 
\t \t \t   <td>Chicken Skewer with Peking Sauce</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£5.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7k.</td> 
 
\t \t \t   <td>Mixed Starters</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£7.50</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7m.</td> 
 
\t \t \t   <td>Deep Fried Wun Ton</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>7n.</td> 
 
\t \t \t   <td>Crispy Seaweed</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.00</td> 
 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t \t 
 
\t \t <h2>Chinese Dishes</h2> 
 
     
 
     <div class="table-responsive"> 
 
\t \t \t <table class="table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Number</th> 
 
\t \t \t \t \t \t <th>Description</th> 
 
\t \t \t \t \t \t <th>Allergies</th> 
 
\t \t \t \t \t \t <th>Price</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>8.</td> 
 
\t \t \t   <td>BOWAN Special Rice</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£5.10</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>9.</td> 
 
\t \t \t   <td>BOWAN Special Chow Mein</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£5.10</td> 
 
\t \t \t \t </tr> 
 
     \t </tbody> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t \t \t \t <h2>Chop Suey Dishes (Beansprouts - Rice Extra)</h2> 
 
     
 
     <div class="table-responsive"> 
 
\t \t \t <table class="table"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Number</th> 
 
\t \t \t \t \t \t <th>Description</th> 
 
\t \t \t \t \t \t <th>Allergies</th> 
 
\t \t \t \t \t \t <th>Price</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>10.</td> 
 
\t \t \t   <td>Special Chop Suey</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.60</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>11.</td> 
 
\t \t \t   <td>King Prawn Chop Suey</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.90</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>12.</td> 
 
\t \t \t   <td>Shrimps Chop Suey</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.60</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>13.</td> 
 
\t \t \t   <td>Chicken Chop Suey</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.30</td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td>15.</td> 
 
\t \t \t   <td>Beef Chop Suey</td> 
 
\t \t \t   <td></td> 
 
\t \t \t   <td>£4.30</td> 
 
\t \t \t \t </tr> 
 
     \t </tbody> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t \t \t \t <h2>Sweet & Sour Dishes (Rice Extra)</h2> 
 
    

Answer 1

也許從這裏開始取決於你真正希望做的：你可以通過設置列寬還可以將col - ** - *添加到您的th中。

* -- custom css for Bootstrap 3.x --*/ 
 
/* move special fonts to HTML head for better performance */ 
 

 
@import url(http://fonts.googleapis.com/css?family=Voltaire); 
 
html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    font-family: Arial, sans-serif; 
 
} 
 
/* use special fonts in certain elements */ 
 

 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
.lead, 
 
.btn, 
 
.navbar a { 
 
    text-transform: uppercase; 
 
    font-family: 'Voltaire', Arial, sans-serif; 
 
    letter-spacing: 2px; 
 
} 
 
h1 { 
 
    font-size: 50px; 
 
} 
 
/*New Rules*/ 
 

 
h1.table-title { 
 
    text-align: center; 
 
    font-size: 50px; 
 
} 
 
h2.menu-label { 
 
    text-align: left; 
 
    text-transform: capitalize; 
 
    font-size: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-12"> 
 
     <h1 class="table-title">Menu</h1> 
 

 
     <br> 
 
     <h2 class="menu-label">Starters</h2> 
 

 
     <table class="table table-responsive table-condensed"> 
 
     <thead> 
 
      <tr> 
 
      <th class="col-sm-2">Number</th> 
 
      <th class="col-sm-4">Description</th> 
 
      <th class="col-sm-4">Allergies</th> 
 
      <th class="col-sm-2">Price</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1.</td> 
 
      <td>Prawn Cocktail</td> 
 
      <td>Fish</td> 
 
      <td>£2.60</td> 
 
      </tr> 
 
      <tr> 
 
      <td>4.</td> 
 
      <td>Chicken and Sweetcorn Soup</td> 
 
      <td></td> 
 
      <td>£2.10</td> 
 
      </tr> 
 
      <tr> 
 
      <td>5.</td> 
 
      <td>Chicken and White Mushroom Soup</td> 
 
      <td></td> 
 
      <td>£2.10</td> 
 
      </tr> 
 
      <tr> 
 
      <td>6.</td> 
 
      <td>Sesame Prawn on Toast</td> 
 
      <td></td> 
 
      <td>£4.20</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7.</td> 
 
      <td>Yuk Sung</td> 
 
      <td></td> 
 
      <td>£6.50</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7a.</td> 
 
      <td>Hot and Sour Soup</td> 
 
      <td></td> 
 
      <td>£2.60</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7c.</td> 
 
      <td>1/4 Aromatic Duck</td> 
 
      <td></td> 
 
      <td>£8.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7c.</td> 
 
      <td>1/2 Aromatic Duck</td> 
 
      <td></td> 
 
      <td>£15.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7c.</td> 
 
      <td>Whole Aromatic Duck</td> 
 
      <td></td> 
 
      <td>£24.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7d.</td> 
 
      <td>Chicken Wings with Peking Sauce</td> 
 
      <td></td> 
 
      <td>£4.20</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7e.</td> 
 
      <td>Chicken Wings with Satay Sauce</td> 
 
      <td></td> 
 
      <td>£4.20</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7f.</td> 
 
      <td>Chilli and Salted Chicken Wings</td> 
 
      <td></td> 
 
      <td>£4.20</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7g.</td> 
 
      <td>Chicken Skewer with Satay Sauce</td> 
 
      <td></td> 
 
      <td>£5.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7h.</td> 
 
      <td>Chicken Skewer with Peking Sauce</td> 
 
      <td></td> 
 
      <td>£5.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7k.</td> 
 
      <td>Mixed Starters</td> 
 
      <td></td> 
 
      <td>£7.50</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7m.</td> 
 
      <td>Deep Fried Wun Ton</td> 
 
      <td></td> 
 
      <td>£4.00</td> 
 
      </tr> 
 
      <tr> 
 
      <td>7n.</td> 
 
      <td>Crispy Seaweed</td> 
 
      <td></td> 
 
      <td>£4.00</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <h2 class="menu-label">Chinese Dishes</h2> 
 

 
     <table class="table table-responsive table-condensed"> 
 
     <thead> 
 
      <tr> 
 
      <th class="col-sm-2">Number</th> 
 
      <th class="col-sm-4">Description</th> 
 
      <th class="col-sm-4">Allergies</th> 
 
      <th class="col-sm-2">Price</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <tr> 
 
       <td>8.</td> 
 
       <td>BOWAN Special Rice</td> 
 
       <td></td> 
 
       <td>£5.10</td> 
 
      </tr> 
 
      <tr> 
 
       <td>9.</td> 
 
       <td>BOWAN Special Chow Mein</td> 
 
       <td></td> 
 
       <td>£5.10</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <h2 class="menu-label">Chop Suey Dishes (Beansprouts - Rice Extra)</h2> 
 

 
     <table class="table table-responsive table-condensed"> 
 
     <thead> 
 
      <tr> 
 
      <th class="col-sm-2">Number</th> 
 
      <th class="col-sm-4">Description</th> 
 
      <th class="col-sm-4">Allergies</th> 
 
      <th class="col-sm-2">Price</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <tr> 
 
       <td>10.</td> 
 
       <td>Special Chop Suey</td> 
 
       <td></td> 
 
       <td>£4.60</td> 
 
      </tr> 
 
      <tr> 
 
       <td>11.</td> 
 
       <td>King Prawn Chop Suey</td> 
 
       <td></td> 
 
       <td>£4.90</td> 
 
      </tr> 
 
      <tr> 
 
       <td>12.</td> 
 
       <td>Shrimps Chop Suey</td> 
 
       <td></td> 
 
       <td>£4.60</td> 
 
      </tr> 
 
      <tr> 
 
       <td>13.</td> 
 
       <td>Chicken Chop Suey</td> 
 
       <td></td> 
 
       <td>£4.30</td> 
 
      </tr> 
 
      <tr> 
 
       <td>15.</td> 
 
       <td>Beef Chop Suey</td> 
 
       <td></td> 
 
       <td>£4.30</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
    </div> 
 
    </div> 
 
</div>