Как выровнять текст по вертикали внутри контейнера независимо от количества ссылок внутри них? - PullRequest
Новая
       12

Как выровнять текст по вертикали внутри контейнера независимо от количества ссылок внутри них?

1 голос
/ 09 ноября 2010

Мне нужна помощь, и я перепробовал почти все, что знаю.Что я пытаюсь сделать (и это не имеет значения, если мне нужно использовать таблицы для достижения этой цели)

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

Я посмотрел онлайн и опробовал несколько примеров, но все они, кажется, взрываются или не выровнены должным образом в IE.

Что мне нужно (если это возможно, я даже больше не знаю), так это иметь текстовые ссылки, которые будут выровнены по вертикали внутри контейнера независимо от того, присутствует ли только одна ссылка или четыре.

То, что происходит, заключается в том, что, когда я устанавливаю поле на 50%, оно прекрасно центрируется, если там есть только одна ссылка, но остальная часть будет опускаться ниже, больше не центрируя ссылки внутри контейнера.

Фактическая вещь, над которой я работаю, такова:

У меня есть заголовок заголовка выше, который простирается через контейнер.В следующей строке у меня есть изображение слева размером 150 на 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>

1 Ответ

1 голос
/ 09 ноября 2010 
.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>
...