个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我需要一些帮助，我已经尝试了几乎所有我知道的方法。我想做什么(如果我必须使用表格来实现这一点并不重要)
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>
最佳答案
.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>
关于html - 你如何在容器内垂直对齐文本而不考虑容器内的链接数量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4135668/
25
4
0
我一直认为使用“if”比捕获异常要好得多(就性能而言)。例如，这样做: User u = Users.getUser("Michael Jordan"); if(u!=null) System.
我正在尝试使用下一个格式将字符转换为日期。我有下一个数据框 i (我在最后添加了 dput() 版本的数据框): Date 1 Dec_28_2012_9:
考虑到 PHP 中的日期戳，我如何计算持续时间？我在日期之间使用的日期格式是“Y-m-d H:i:s”， 我的工作代码只能计算时间之间的持续时间而不考虑日期。 下面是我的代码: $assigned_t
我正在尝试解释 GLMM 中的自相关。我的响应变量是 bool 值，它表示一组 hive 的生命周期中是否存在 en 事件。我试图用一组描述每个巢状态的数值变量来预测此类事件的概率。因此，我在广义模型
我对如何解释 undefined variable 感到有点困惑(我不确定你现在是否可以)。我正在尝试使用以下代码底部附近的 if else 语句(已注释掉的行)。 这个想法是，如果请求歌曲的人不是与
Bjarne Stroustrup 的 The C++ Programming Language Fourth Edition 中的以下内容是什么意思？ "Consider . (dot) suspe
我想要一个主元素，边 block 漂浮在它的右侧。我不知道边 block 的数量，也不知道它们的最终总高度。但是我的主要元素应该具有相同的高度(请参阅以下示例以更好地理解)，而无需使用列。 (虚线部分
我在每个 TextView 上都有以下警告(来自 Lint)，在我的 XML 中有一个 ID。 Consider making the text value selectable by specify
目前，我有 6 条曲线，以 6 种不同的颜色显示，如下所示。 这 6 条曲线实际上是由 一个相同实验 的 6 次试验生成的。这意味着，理想情况下它们应该是相同的曲线，但由于噪声和不同的试验参与者，它们
winner of a recent Wikipedia vandalism detection competition建议可以通过“检测考虑到 QWERTY 的随机键盘点击来改进检测键盘布局”。 示
多年来，我一直在编写 C 语言，主要是在嵌入式环境中，并且对指针有一个非常好的心智模型——我不必明确地考虑如何使用它们，我对指针算法 100% 感到满意，指针数组，指针指针等。 我写的 C++ 很少，
我正在使用 Boost.Date_time 来获取两个日期之间的时差。我希望代码在这些天也考虑夏令时的变化，并给我正确的时间间隔。 考虑这个例子。 2015 年 11 月 1 日，美国的 DST 将发
我有一个(人类)名字的向量，全部用大写字母表示: names <- c("FRIEDRICH SCHILLER", "FRANK O'HARA", "HANS-CHRISTIAN ANDERSEN")
我想呈现一个表单小部件。这是我要生成的原始 HTML: 使用这个: {{ form_row(form.email, { 'type' : 'email', 'attr' : { 'class' :
我正在开发一个 python 项目，它使用 pythonnet 和几个 C# dll 作为依赖项。 由于我不想将 dll 推送到 git 存储库，因此我调整了 .gitignore 文件。但是，现在
考虑到上午/下午，我想将字符串转换为 php 数据时间。 我想将 '03/06/2015 12:17 am' 转换为 php datatime。 我试过了， $myDateTime = DateTim
我想排除那些具有相同标题和同一年份的实例。 title votes ranking year 0 Wonderland 19 7.9 1931 1
例如对于一个 EditText，通常指定 android:inputType="numberDecimal"用于文本字段应该包含十进制数。但这假设“。”用作小数点分隔符，在某些国家/地区使用“,”代替
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
作为练习，我决定学习 Java 中的 lambda 表达式。我想重写我发现笨拙且冗长的旧代码。它检查命令行参数是否是(1)文件路径或(2)目录路径。在(1)场景中，它将命令行参数传递给方法。在 (2)
我是一名优秀的程序员,十分优秀！