助けが必要で、知っていることはほとんどすべて試しました。私がやろうとしていること(これを達成するためにテーブルを使用する必要があるかどうかは問題ではありません)
http://img602.imageshack.us/img602/8769/verticalcentering.jpg
私はオンラインで見て、いくつかの例を試してみましたが、それらはすべて爆発するか、IE で適切に整列していないようです。
私が必要としているのは (可能であれば、もうわかりません)、リンクが 1 つしか存在しないか、4 つしか存在しないかに関係なく、コンテナー内で垂直方向に整列するテキスト リンクを用意することです。
マージンを 50% に設定すると、そこにリンクが 1 つしかない場合は問題なく中央に配置されますが、残りはそれを下回り、コンテナー内のリンクが中央に配置されなくなります。
私が実際に取り組んでいるのはこれです：
上記のヘッダー タイトルは、コンテナー全体に広がっています。次の行には、左側に 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>