如何垂直对齐我的列中的文本？

时间：2012-01-29 06:19:16

标签： html css html5 css3 html-table

我正试图在我的HTML页面上设置页脚，我希望文本直接显示在标题下方：

enter image description here

可以看出，当有4行但是如果我只写一行时，它就不会出现。我尝试了valign="top"，但它不起作用：

          <div id="footer">
    <div class="footer-area">
         <table cellspacing='2' cellpadding='2' border='0' width='798'><tbody><tr><td><h3>Contact</h3></td><td><h3>Opportunity</h3></td><td width='100'><h3>Products&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;</h3></td><td><h3>Policies</h3></td><td><h3>Our Sites</h3></td></tr><tr><td valign="top">Bnano International Ltd<br>

207 Regent Street<br>
London, England<br>info@bnano.eu
</td><td><a href="/">How to join</a><br>
<a href="/">Why join Bnano</a><br>
<a href="/">Financial opportunity</a><br>
<a href="/">Distributors resources</a> <td valign="top"><a href="/">Water</a>



</td><td valign="top"><a href="/">Company Policies</a><br>
<a href="/">Retail term of use</a><br>
<a href="/">Privacy policy</a><br>
<a href="/">Return policy</a></td><td valign="top"><a href="/">Scandinavia</a><br>
<a href="/">Discover Bnano</a></td></tr></tbody></table>



    </div>
  </div><!-- footer -->

我的CSS文件是

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, hr, button {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background:none;}
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:middle;}
ol, ul {list-style:none;}
h1, h2, h3, h4, h5, h6, li {line-height:100%;}
blockquote, q {quotes:none;}
q:before,
q:after {content: '';}
table {border-collapse:collapse; border-spacing:0;}
input, textarea, select{
    font:11px Arial, Helvetica, sans-serif;
    vertical-align:middle;
    margin:0;
    padding:0;
}
form, fieldset{border-style:none;}
html {height:100%;}
body {
    min-width:1004px;
    color:#404344;
    height:100%;
    font:13px/16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background:#fff;
    margin: 0 1px 1px;
}
img{border-style:none;}
a{
    text-decoration:none;
    color:#000000;
}
a:focus {outline:none;}
a:hover{text-decoration:underline;}
/* wrapper */
#wrapper{
    width:100%;
    min-height:100%;
}
* html #wrapper {height:100%;}
/* header */
#header {
    width:100%;
    background:#1596c3 url(/welcome/static/images/bg-header.png) repeat-x;
}
#header:after {
    display:block;
    clear:both;
    content:"";
}
/* header-area */
.header-area {
    margin:0 auto;
    width:948px;
    padding:0 23px;
}
/* top-panel*/
.top-panel {
    overflow:hidden;
    height:36px;
    padding:6px 0 0 4px;
    margin:0 0 19px;
    position:relative;
    z-index:9999999 !important;
}
/* search-form */
.search-form {
    float:right;
    margin:0 10px 0 15px;
}
.search-form form {float:left;}
.top-panel .text {
    float:left;
    padding:6px 13px 7px 13px;
    margin:0 5px 0 0;
    background:url(http://www.supernaturalsilver.com/images/bg-text.gif) no-repeat;
}
.top-panel .text input {
    font:13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color:#8cc0d3;
    float:left;
    width:157px;
    margin:0;
    padding:0 -2px 0 0;
    border:0;
    background:none;
}
.top-panel .text input:focus {outline:none;}
.search-form .search {
    float:left;
    background:url(http://www.supernaturalsilver.com/images/btn-search.gif) no-repeat;
    width:26px;
    height:27px;
    overflow:hidden;
    text-indent:-9999px;
    line-height:0;
    font-size:0;
    cursor:pointer;
    border:0;
}
/* email-form */
.email-form {
    float:left;
    width:214px;
}
.email-form form {float:left;}
.email-form .go {
    float:left;
    background:url(http://www.supernaturalsilver.com/img/btn-go.gif) no-repeat;
    width:26px;
    height:27px;
    overflow:hidden;
    text-indent:-9999px;
    line-height:0;
    font-size:0;
    cursor:pointer;
    border:0;
}
/* links */
.top-panel .links {
    float:right;
    padding:9px 0 0;
    width:400px;
}
.top-panel .links .title {
    float:left;
    color:#fdfdfd;
    font-weight:normal;
    font-size:13px;
    text-transform:uppercase;
    padding-top:1px;
}
.top-panel .links .title .cufon {
    float:left;
    margin:0 !important;
}
.top-panel .links ul {
    float:left;
    position:relative;
    margin:-5px 0 0;
}
.top-panel .links li {
    float:left;
    padding:0 0 0 9px;
}
.top-panel .links li img {display:block;}
/* header-info */
.header-info {
    padding:0 0 95px 17px;
    position:relative;
    z-index:99999 !important;
}
/* logo */
.logo {
    float:left;
    background:url(/welcome/static/images/bnano_logo.jpg) no-repeat;
    width:220px;
    height:76px;
    text-indent:-9999px;
    margin:0 0 0 -15px;
    position:relative;
    z-index: 999999 !important;
}
.logo a {
    display:block;
    height:100%;
}
/* nav */
#nav {
    float:right;
    padding:20px 0 0;
}
#nav li {
    float:left;
    margin:0 3px 0 3px;
    font-size:16px;
    line-height:17px;
}
#nav li a {
    float:left;
    padding:0 5px 0 0;
    color:#a9cfdd;
    cursor:pointer;
}
#nav li a span {
    float:left;
    padding:5px 6px 4px 11px;
}
#nav li.active a,
#nav li a:hover {
    text-decoration:none;
    color:#f6f6f6;
    background:url(http://www.supernaturalsilver.com/img/btn-active.gif) no-repeat 100% -23px;
}
#nav li.active a span,
#nav li a:hover span {
    background:url(http://www.supernaturalsilver.com/img/btn-active.gif) no-repeat;
}
#nav li a .cufon {
    float:left;
    margin:0 !important;
}
/* info-area */
#header .info-area {
    height:398px;
    width:900px;
    background:none !important;
    padding:15px 2px 0 13px;
    margin-top:-148px;
    margin-left:25px;
}

#header .info-area .txt {
    float:left;
    color:#f6f8f9;
    font-size:19px;
    margin-top:100px;
}
#header .info-area .txt .cufon {
    float:left;
    margin:0 !important;
}
#header .info-area .txt .text .cufon {margin-top:1px !important;}
#header .info-area .title {
    color:#a9cfdd;
    font-size:48px;
    position:absolute;
    line-height:51px;
    padding-top:55px;
    width:550px;
}
#header .info-area .title span {
    font-size:35px;
    line-height:36px;
    display:block;
    overflow:hidden;
    width:100%;
    height:32px !important;
    padding-top:1px;
}
#header .info-area .title em {
    font-style:normal;
    display:block;
    overflow:hidden;
    width:100%;
    height:53px !important;
}
#header .info-area .desc {
    font-family: "Arial Narrow", sans-serif;
    line-height:20px;
    margin: 8px 0 25px 3px;
    font-size:19px;
    letter-spacing:2px;
    position:absolute;
    z-index:9999 !important;
    padding-top:130px;
    width:550px;
}
#header .info-area .txt .text {
    display:block;
    overflow:hidden;
    height:1%;
    padding:0 0 5px;
}
#header .info-area .txt .text1 {
    background:url(http://www.supernaturalsilver.com/img/ico03.gif) no-repeat 2px 9px;
    padding:26px 0 27px 114px;
}
#header .info-area .img {
    float:right;
    position:relative;
    margin-left:500px;
    margin-top:-100px;
}
#header .info-area .more {
    overflow:hidden;
    height:25px;
    letter-spacing:1px !important;
    margin-top:23px;
    margin-left:-3px;
}
#header .info-area .more a {
    color:#f6f8f9;
    float:left;
    background:url(http://www.supernaturalsilver.com/img/bullet05.gif) no-repeat 5px 3px;
    padding:0 0 0 19px;
    font-size:18px;
}
#header .info-area .more a span {
    float:left;
    margin-left:-2px;
    padding-bottom:0;
}
#header .info-area .more a:hover {text-decoration:none;}
#header .info-area .more a:hover span {
    border-bottom:1px solid #f6f8f9;
    padding:0;
}
/* main */
#main {
    overflow:hidden;
    width:100%;
    padding:58px 0 122px;
    background:url(http://www.supernaturalsilver.com/img/bg-main-area.gif) repeat-x;
}
/* onecolumn */
#onecolumn {
    margin:0 auto;
    overflow:hidden;
    width:1004px;
    position:relative;
}
#onecolumn ul {
    margin:10px 0 10px 25px;
}
#onecolumn li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:16px;
    background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
#onecolumn  h2 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 8px 0;

}
#onecolumn  h2 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#onecolumn  h2 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    padding-bottom:15px;
}
#onecolumn  h2 .cufon {
    float:left;
    margin:0 !important;
}
#onecolumn  h3 {
    color:#676a6b;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 10px;
}
#onecolumn  h3 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#onecolumn  h3 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
}
#onecolumn  h3 .cufon {
    float:left;
    margin:0 !important;
}
#onecolumn .content {
    padding:0 48px 10px 48px;
}
#onecolumn content p {margin:0 0 16px;}
/* twocolumns */
#twocolumns {
    margin:0 auto;
    overflow:hidden;
    width:1004px;
    position:relative;
}
#twocolumns h2 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 14px 0;
}
#twocolumns h2 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#twocolumns h2 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
    font-size:30px;
}
#twocolumns h2 .cufon {
    float:left;
    margin:0 !important;
}
#twocolumns h3 {
    color:#062f3d;
    font-size:25px;
    line-height:26px;
    font-weight:normal;
    margin:0 0 10px;
}
#twocolumns h3 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
}
#twocolumns h3 span {
    display:block;
    overflow:hidden;
    width:100%;
    position:relative;
    margin:-3px 0 0;
    font-size:26px;
}
#twocolumns h3 .cufon {
    float:left;
    margin:0 !important;
}
#twocolumns h4 strong {
    color:#138db7;
    font-weight:bold;
    display:block;
    overflow:hidden;
    width:100%;
    font-size:16px;
    margin: 10px 0 17px 2px;
}
/* content */
#content {
    position:relative;
    float:left;
    width:596px;
    padding:0 20px 10px 48px;
    z-index: 99999 !important;
}
#content p {
    margin:0 2px 16px;
    line-height:18px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:13px;
}
#content p img {
    padding:10px;
}
#content .more {
    overflow:hidden;
    height:1%;
    padding:0 0 16px 4px;
    font-size:14px;
}
#content .more a {
    float:left;
    background:url(http://www.supernaturalsilver.com/img/bullet01.gif) no-repeat 0 55%;
    padding:0 0 0 13px;
    color:#404344;
}
#content .more a:hover {
    color:#138db7;
}
/* video-block */
#content .video-block {
    width:616px;
    margin:0 -20px 0 -19px;
    position:relative;
    padding:0 4px 0 15px;
    background:#d4dadb url(http://www.supernaturalsilver.com/img/bg-video-block.gif) repeat-x;
}
#content .video-block:after {
    display:block;
    clear:both;
    content:"";
}
#content .video-block .heading {
    background:url(http://www.supernaturalsilver.com/img/bg-heading.gif) no-repeat;
    width:176px;
    height:51px;
    position:relative;
    margin:0 0 4px -7px;
    padding:25px 0 0 15px;
}
#content .video-block .info-col {
    float:left;
    width:271px;
    padding:0 0 0 7px;
    margin:-6px 0 0;
    position:relative;
}
#content .video-block h3 {
    overflow:hidden;
    width:100%;
    padding:3px 0 0;
    margin:0;
}
#twocolumns .video-block strong {
    width:auto;
    float:left;
    display:inline;
    font-size:18px;
    color:#fff;
}
#twocolumns .video-block span{
    width:auto;
    float:left;
    display:inline;
    font-size:25px;
    color:#fff;
}
/* list */
#content .video-block .list {height:1%;}
#content .video-block .list li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 13px 13px;
    line-height:14px;
    background:url(http://www.supernaturalsilver.com/img/bullet02.gif) no-repeat 1px 4px;
}
#content .video-block .list li h4 {
    font-size:13px;
    line-height:15px;
    font-weight:normal;
    color:#967723;
}
#content .video-block .list li h4 a {color:#967723;}
#content .video-block .list li p {margin:0;}
#content .video-block .video {
    float:right;
    margin:0 0 -8px;
    padding:30px 0 0;
    position:relative;
}
#content .video-block .video img {display:block;}
#content blockquote {
  font: 14px/22px normal helvetica, sans-serif;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
}
#content blockquote p {margin:0;}
#content blockquote cite {font-style:normal;}
/* blocks */
#content .blocks {
    overflow:hidden;
    width:582px;
}
#content .blocks h3 {
    font-size:14px;
    line-height:18px;
    font-weight:normal;
    color:#4499b7;
    margin:0 0 13px;
}
#content .block-holder {
    width:590px;
    overflow:hidden;
    margin:0 -8px 5px 0;
}
#content .blocks .block {
    width:290px;
    margin:0 4px 0 0;
    padding:18px 0 10px;
    float:left;
    color:#ba9d50;
    font-size:11px;
    line-height:13px;
    background:#dcddde;
}
#content .blocks .block .img {
    overflow:hidden;
    width:100%;
    text-align:center;
    margin:0 0 18px;
}
#content .blocks .block .img img {vertical-align:top;}
#content .blocks .block p {
    text-align:center;
    margin:0;
}
#content .blocks .block p a {color:#ba9d50;}
#content ul {
    margin:10px 0 10px 25px;
}
#content li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:16px;
    background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
/* sidebar */
#sidebar {
    float:right;
    position:relative;
    width:315px;
    padding:0 3px 0 10px;
    overflow:hidden;
    z-index: 99999 !important;
}
#sidebar p {
    margin-left:2px;
}
/* news-list */
#sidebar .news-list {
    width:300px;
    padding:0 15px 19px 0;
}
#sidebar .news-list li {
    overflow:hidden;
    height:1%;
    vertical-align:top;
    padding:0 0 12px 15px;
    line-height:14px;
    background:url(http://www.supernaturalsilver.com/img/bullet03.gif) no-repeat 2px 6px;
}
#sidebar .news-list li h4 {
    font-size:13px;
    line-height:15px;
    font-weight:normal;
    margin:0 0 1px;
}
/* news-list1 */
#sidebar .news-list1 {
    padding-right:0;
    padding-bottom:14px;
    width:300px;
}
#sidebar .news-list1 li {
    background-position:3px 6px;
    padding-left:17px;
}
#sidebar .news-list1 h4 {
    color:#967723;
    position:relative;
    word-spacing:-1px;
}
#sidebar .news-list1 h4 a {color:#967723;}
/* #sidebar .news-list1 h4 a {color:#967723;} */
/* info-list */
#sidebar .info-list {
    width:269px;
    padding:1px 0 0;
}
#sidebar .info-list li {
    overflow:hidden;
    height:1%;
    font-size:25px;
    line-height:27px;
    margin:0 0 2px;
    vertical-align:top;
    background:url(http://www.supernaturalsilver.com/img/bg-info-list.gif) no-repeat;
}
#sidebar .info-list li a {
    float:left;
    padding:9px 10px 4px 41px;
    color:#138db7;
    background:url(http://www.supernaturalsilver.com/img/bullet04.gif) no-repeat 13px 50%;
}
#sidebar .info-list li a .cufon {
    float:left;
    margin:0 !important;
}
#sidebar .info-list li a:hover {text-decoration:none;}
#sidebar .info-list li a span {
    float:left;
    margin:0 2px 0 0;
}
#sidebar .info-list li a strong {float:left;}
#sidebar .view {
    display:block;
    background:url(http://www.supernaturalsilver.com/assets/files/img/btn/online-store.png) no-repeat;
    color:#fff;
    font-size:30px;
    width:191px;
    height:75px;
    margin:0 0 0 -8px;
    padding:22px 115px 0 18px;
}
#sidebar .view span {
    font-size:30px;
    overflow:hidden;
    width:100%;
    display:block;
}
#sidebar .view strong {
    overflow:hidden;
    width:100%;
    display:block;
}
#sidebar .view .cufon {
    float:left;
    margin:0 !important;
}
#sidebar .view:hover {text-decoration:none;}
/* footer */
#footer {
    height:206px;
    position:relative;
    overflow:hidden;
    margin:-106px 0 0;
    font-size:11px;
    line-height:14px;
    color:#9ddbf1;
    background:#1494c1 url(http://www.supernaturalsilver.com/img/bg-footer.gif) repeat-x;
}
/* footer-area */
.footer-area {
    margin:0 auto;
    width:948px;
    padding:52px 1px 0;
}
.footer-area p a {color:#000000;}
#footer .copyright {
    float:left;
    width:390px;
    margin:5px 30px 0 0;
}
#footer .copyright p {text-align:right;}
#footer .logo1 {
    float:left;
    background:url(http://www.supernaturalsilver.com/img/logo01.png) no-repeat;
    width:130px;
    height:102px;
    overflow:hidden;
    text-indent:-9999px;
    position:relative;
    margin:-52px 30px 0 0;
}
#footer .logo1 a {
    display:block;
    height:100%;
}
/* info */
#footer .info {
    float:left;
    width:350px;
    position:relative;
    margin:-9px 0 0;
}
#sidebar form { 
width : 295px;
height : auto; 
text-align : left; 
margin-top : 10px;
margin-bottom:25px;
border: none;
}

#sidebar input { 
width : 240px; 
height:20px;
background : url(http://www.supernaturalsilver.com/img/bg-input.png) no-repeat scroll 0% 0%;
color : #666; 
font-size : 14px; 
margin-bottom : 6px; 
padding : 10px 10px 8px 10px;
border:0;
}

#sidebar textarea { 
width : 265px; 
height : 105px;
background : url(http://www.supernaturalsilver.com/img/textarea-b.png) no-repeat scroll 0% 0%; 
padding : 10px 30px 10px 10px; 
font-size : 14px; 
color : #666; 
margin-bottom : 1px;
border:0;
}

#sidebar .button { 
background : url(http://www.supernaturalsilver.com/img/button.png) no-repeat 0% 0%; 
width : 104px; 
height : 30px; 
color : #fff; 
font-size : 13px; 
cursor:pointer;
margin-top:10px;
margin-left:180px;
padding : 5px 0 5px 0;
border:0;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#sidebar .invalidValue { 
color:#c21313;
}

你能告诉我如何实现“水”和“斯堪的纳维亚”这些文本在他们的专栏中出现在顶部吗？

3 个答案:

答案 0 :(得分：2)

在CSS中，您专门将vertical-align设置为中间，这可能会覆盖valign属性。看看这个规则：

table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:middle;}

当我将属性设置为顶部时，所有内容都按预期显示。

答案 1 :(得分：2)

你使用的是强烈气馁的表格，尤其是最近才开始使用，而你甚至没有正确使用它们......

表数据中的换行符正在垂直展开行。垂直对齐的中间表数据（在这种情况下是水和斯堪的纳维亚比特）以比您想要的更大的行为中心。最好更改页脚的结构，但只需更改很少，就可以将行数更改为内部的换行符。

答案 2 :(得分：-1)

我知道一个技巧，玩padding-top。

相关问题
最新问题