如何垂直对齐我的列中的文本？ [英] How to vertically align text in my columns?
本文介绍了如何垂直对齐我的列中的文本？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要在我的HTML页面上创建页脚，我希望文字直接显示在标题下面：
可以看出，当有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>< / h3>< / td>< td width ='100'>< h3>产品&＃160;&＃160; 160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160;&＃160; h3>< / hd>< / td>< / tr>< / td>< ; tr>< td valign =top> Bnano International Ltd< br>
207 Regent Street< br>
伦敦，英格兰< br> info@bnano.eu
< / td>< td>< a href =/>如何加入< / a>
< a href =/>为什么加入Bnano< / a>< br>
< a href =/>财务机会< / a>< br>
< a href =/>分销商资源< / a> < td valign =top>< a href =/>水< / a>
< / td>< td valign =top>< a href =/>公司政策< / a>< br> ;
< a href =/>零售使用条款< / a>< br>
< a href =/>隐私权政策< / a>< br>
< a href =/>退货政策< / a>< / td>< td valign =top>< a href =/>斯堪的纳维亚< / a> < br>
< a href =/>探索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 ，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;轮廓：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;} b $ b 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 / 16pxLucida 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 {
宽度：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输入{
font：13pxLucida 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 3ds 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;
}
你能告诉我如何实现文本Water和Scandinavia
在你的CSS中，你已经具体设置了 vertical-align 到中间，这可能会覆盖 valign 属性。看看这个规则：
table，tbody，tfoot，thead，tr，th，td {padding：4px; vertical -align：middle;}
当我将属性设置为top时， p>
I'm trying to make a footer to my HTML page and I want the texts to appear directly beneath the headings:
As can be seen this works when there are 4 rows but if I write only one row it doesn't come on top. I tried putting valign="top" but it didn't work:
<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            </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 -->
My CSS file is
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;
}
Can you tell me how to achieve that the texts "Water" and "Scandinavia" appear on top in their columns?
解决方案
In your CSS you have specifically set your vertical-align to middle, which may be overriding the valign attribute. Take a look at this rule:
table, tbody, tfoot, thead, tr, th, td {padding:4px;vertical-align:middle;}
When I set the property to top there everything appears as expected.
这篇关于如何垂直对齐我的列中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
