Question

我需要一些帮助，我几乎尝试了所有我知道的事情。我想做什么（如果我必须按顺序使用表来实现这一点并不重要）

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

我看过网上并尝试了几个例子，但它们似乎都在IE中爆炸或不正确。

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

当我将保证金设置为50％时，如果只有一个链接，它会很好地居中，但其余部分将低于它，不再使链接集中在容器内。

我正在研究的实际情况是：

我上面有一个标题标题，横跨容器。下一行我在左边有一个150px到150px的图像 - 接下来我有另一个高度为150px的容器以及这个容器的最大高度 - 这个容器里面是我想要的地方我的链接垂直居中。

这甚至可能吗？或者认为它可以在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>

Answer 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>

如何在容器内垂直对齐文本，而不管其中的链接数是多少？

1 个答案: