当前位置： 文江博客话题详情

如何在容器内垂直对齐文本，而不管容器内的链接数量如何？

发布于 2024-10-01 17:47:08 字数 3786 浏览 9 评论 0原文

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

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

我已经在网上查看并尝试过有几个例子，但它们似乎都在 IE 中崩溃或无法正确对齐。

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

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

我正在做的实际事情是这样的：

我上面有一个标题标题，它横跨容器。下一行左侧有一个 150px x 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>
原文

I need some assistance and I've tried almost everything I know. What I am trying to do (and it doesn't matter if I have to use tables on order to achieve this)

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

I've looked online and tried out several examples but they all seem to blow up or not align properly in IE.

What I need (if its possible, I don't even know anymore) is to have text links that will align vertically within the container its in regardless of whether there is only one link present, or four.

What's been happening is that when I set the margin to 50% it centers fine if there is only one link there, but the remainder will fall below it no longer centering the links within the container.

The actual thing I am working on is this:

I have a header title above that stretches across the container. The next row I have an image on the left that is 150px by 150px - and next to that I have another container that has a height of 150px as well as this is the maximum height of this container - inside this container is where I would like my links to hang out vertically centered.

Is this even possible? or is it a pipe dream to think it will work in IE and is cross browser compliant?

It doesn't matter anymore if I have to resort to tables and css to achieve this... I just need some assistance with it as I have never had to vertically center anything depending on its content before and I just can't wrap my head around how to achieve this effect.

Any help would be greatly appreciated :) Thanks in advance!

HERE IS THE CSS AND HTML BELOW

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

征﹌骨岁月お 2024-10-08 17:47:08
.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>

.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>
回复 原文
~没有更多了~

关于作者

牵你手

暂无简介

0 文章
0 评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文