web-dev-qa-db-ja.com

垂直に配置されたアンカーテキスト？

あなたはおそらくこの質問をよく見るでしょう。しかし、私はスレッドを通過してきましたが、自分の状況に対する解決策を見つけることができないようです。それはおそらく私が行方不明になっている非常に微細なものであるか、あるいは私は間違った木を一斉に吠えているだけかもしれません。

基本的に私がやろうとしているのは、高さと幅が設定された{display：block;}のアンカーを取得し、そのテキストを垂直方向と水平方向の中央に配置することです。

今これは私のCSSです

.logo
{
    width:140px;
    height:75px;
    border-right:1px dotted black;
    border-bottom:1px dotted black;
    float:left;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}

.logo a
{
    display:block;
    width:140px;
    height:75px;
    background-color:#fff;
    font-size:15px;
    font-weight:bold;
    color:#c60606;
}
/*the reason for the double declaration of text information is because
  some of the logo divs do not have anchors in them, and it's for uniformity
  purposes.
*/

.logo a div
{
    margin-top:10px;
}

そして、htmlは

<div class="logo"><a href="#"><div>my link</div></a></div>

アンカーの内側にdivを貼り付けた理由は、テキストを実際のブロックから分離するのに良い方法だと思ったためですが、マージンを設定すると、テキストだけでなくアンカーが下に移動します。 vertical-align属性は基本的に何もしません、そして私は何をすべきかという点で途方に暮れています。どんな提案やリストラのアイデアも素晴らしいでしょう。ありがとうございました。

サンプルは http://www.dsi-usa.com/test/clientele.php にあります。サイトを自由に閲覧してください。まだ作業中です。多くの作業を整理して再実行する必要があります。 -コード化。とにかく、そのサンプルはまさに私が欲しいものです。テキストも垂直方向に揃える必要があります。

cssvertical-alignment
15
Brodie

<div>内に<a>を含めることはできません。無効なHTMLです。代わりに、<span>をdisplay: block;に設定して使用してください。

更新：

HTML5以降、アンカー（または任意のブロックレベル要素）内にdivを含めることができるようになりました。

ただし、これが合法であるためには、HTML5Doctypeを使用する必要があります。

<!DOCTYPE html>
16
Kyle

収容ボックスの行の高さ（アンカー-内側のdivを捨てるだけで、必要ありません）をその高さに等しく設定すると、単一行テキストのは垂直方向の中央に配置されます。行の折り返しが必要な場合は、さらに複雑になります。

より単純なシナリオを示すために、アンカー要素が1つだけのフィドルを次に示します。 http://jsfiddle.net/vdkAb/1/

[〜＃〜]更新[〜＃〜]
...そしてIE6/7のサポートについて心配する必要がない場合（幸運なことに！）、display：table-cellを使用でき、行の高さを指定しなくても簡単に機能します。 -次のように複数行でも： http://jsfiddle.net/PH5Yw/

32
Faust

これは通常私のために働きます

$(function(){
    
    $("button").click(function(){
        $(".navbar").toggleClass("large");
    });
    
});
*{
    box-sizing: border-box;
}

.navbar{
    display: flex;
    color: white;
    background: black;
    height: 30px;
    margin-bottom: 10px;
    transition: all 0.25s ease;
}

.navbar.large{
    height: 120px;
}

a{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: 20px;
    padding: 0 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
    <a>TITLE</a>
    <a>Contact</a>
    <a>About Us</a>
</div>
<button>Change Nav Size</button>

私はこれをそこに出すべきだと思っただけです:)

リンクコンテナがdisplay：flexの場合にのみ機能します

5
user5347910