1

我需要一些帮助，我已经尝试了几乎所有我知道的东西。我正在尝试做什么（我是否必须使用表格来实现这一点并不重要）

http://img602.imageshack.us/img602/8769/verticalcentering.jpg

我在网上查看并尝试了几个示例，但它们似乎都在 IE 中爆炸或无法正确对齐。

我需要的（如果可能的话，我什至不知道了）是让文本链接在容器内垂直对齐，无论是否只有一个链接或四个链接。

发生的情况是，当我将边距设置为 50% 时，如果那里只有一个链接，它会很好地居中，但其余的将落在它下方，不再使容器内的链接居中。

我正在做的实际事情是：

我在上方有一个标题标题，横跨容器。下一行我在左侧有一个 150 像素 x 150 像素的图像 - 旁边我有另一个高度为 150 像素的容器，这是这个容器的最大高度 - 在这个容器内部是我想要的我的链接垂直居中。

这甚至可能吗？还是认为它可以在 IE 中运行并且兼容跨浏览器是一个白日梦？

如果我必须求助于表格和 css 来实现这一点，这已经无关紧要了......我只需要一些帮助，因为我以前从来没有根据它的内容垂直居中任何东西，我只是无法包装我的围绕如何实现这种效果。

任何帮助将不胜感激:) 提前致谢！

这是下面的 CSS 和 HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link Module</title>
<style type="text/css">
<!--
.wrapper { height: 210px; width: 538px; background-color: #FFCCFF; }
.header { height: 47px; border-bottom: thin dotted #666; }
.txt-style {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: bold;
color: #666666;
text-decoration: none;
text-align: left;
vertical-align: middle;
white-space: normal;
display: block;
}
.cos-sl-txt-cntr-two {
height: 150px;
}
.cos-sl-txt-cntr-two ul {
height: 150px;
margin-top: auto;
margin-bottom: auto;
}
.cos-sl-txt-cntr-two li {
margin-top: 50%;
margin-bottom: auto;
}
cos-sl-img-two {
width: 150px;
height: 150px;
background-color: #FF0033;
}
.learn-txt, .leader-txt {
color: #FF6666;
font-family: "Arial", Helvetica, sans-serif;
text-transform: uppercase;
font-size: 12px;
margin: 0; 
padding-top: 2px;
padding-left: 10px;
letter-spacing: .75px;
}
.leader-txt {
color: #fff;
font-size: 23px;
font-weight: bold;
padding-top: 0px;
line-height: 24px; 
letter-spacing: -0.25px; 
}
.img-ctnr, .img-ctnr-two {
width: 150px;
height: 150px;
float: left;
padding-left: 12px;
}
/* IMAGE LOCATION */
.img-two {
width: 150px;
height: 150px; 
display: block;
background-color: #FF99CC;
border: solid 3px #CCC; 
}
.txt-cntr, .txt-cntr-two {
width: 406px;
height: 126px;
float: left;
}
.txt-cntr-two {
width: 250px; 
height: 150px;
padding-left: 50px;
background-color:#CC99CC; 
}
.txt-pos {
float: left;
width: 100px;
height: 50px; 
padding-left: 20px; 
}
/* NAME TEXT/TITLE TEXT */
.name-txt, .info-txt, .name-txt-title, .info-txt-link {
font-family: "Arial", Helvetica, sans-serif;
font-size: 13px;
color: #003466; 
margin: 0;
padding-top: 18px;
padding-left: 13px;
}
.sl-name-txt-title {
color: #666;
font-size: 10px;
font-weight: bold; 
}
/* INFO TEXT/TEXT LINK OVER-RIDE */
.info-txt, .info-txt-link {
    padding-top: 0;
    color: #333;
    font-size: 12px;
    line-height: 1.1; 
}
.info-txt-link a {
    color: #003466;
    text-decoration: none; 
}
/* Hover State for the web links */
.info-txt-link a:hover {
    color: #ED1B24;
    text-decoration: none; 
}
-->
</style>
</head>

<body>
    <div class="wrapper">
        <!--CONTAINER HOLDING THE HEADER ELEMENTS-->
        <div class="header">
            <p class="learn-txt">Title</p>
            <p class="leader-txt">Subtitle</p>        
        </div>
        <div class="img-ctnr-two">
            <div class="img-two">
            </div>
        </div>
        <div class="txt-pos">
            <p class="name-txt-title">Canada</p>
            <p class="info-txt-link"><a href="#">www.mylinkhere.com</a></p>                 
        </div>
    </div>
</body>
</html>
4

1 回答 1

1 
.outer {
    border: 1px solid red;
    line-height: 5em;
}
.outer .inner {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2em;
}

<div class="outer">
    <div class="inner">
        ABC
    </div>
</div>

<div class="outer">
    <div class="inner">
        ABC<br>ABC
    </div>
</div>

<div class="outer">
    <div class="inner">
        ABC<br>ABC<br>ABC
    </div>
</div>
于 2010-11-09T16:07:26.703 回答