2016-05-05 6 views
0

アンカータグのリンクを縦横に中央に配置する方法は? divや親要素は使用されません。私はちょうど次のイメージのようにそれを中心にしたい。 This is how i want it to look like.divなしでアンカータグ要素を垂直方向と水平方向の両方にセンタリングする方法はありますか?

そして、これは私のコードです:

<html> 
<head> 
<style type="text/css"> 
body{ 
background:#000; 
} 
.link{ 
font-size:40px; 
} 
</style> 
</head> 
<body> 
<center><a class="link" href="#">BornExplorer</a></center> 
</body> 
</html> 
+0

あなたは可能性が高いあなたが働いていないコード、またはあなたが試みたが、失敗したアプローチが含まれている場合、応答、および有益な情報を得ようとしています。 – AeroBuffalo

+0

@AeroBuffaloごめんなさい。今それが含まれています。 –

答えて

0

はあなたがセットアップline-height:100vhを使用して、センタリング可能性がAA、単一のリンクで全ページのセットアップのために行くされている場合はラインことを意味:あなたは、ビューポートに対するタグを配置したいと仮定すると、高さはページの高さの100%です。

html,body{width:100%;height:100%;margin:0;} 
 
body{ 
 
    background:#000; 
 
    line-height:100vh; 
 
} 
 
.link{ 
 
    font-size:40px; 
 
    line-height:1; 
 
    display:inline-block; 
 
}
<center><a class="link" href="#">BornExplorer</a></center>

+0

助けてくれてありがとう! :) –

0

アンカータグボックスの幅と高さが固定されている場合、それは非常に簡単です。

html { background: black; color: white; } 
 
.centered { 
 
    /* size */ 
 
    width: 10em; 
 
    height: 1em; 
 
    
 
    /* positioning */ 
 
    margin-left: -5em; /* -(width/2) */ 
 
    margin-top: -0.5em; /* -(height/2) */ 
 
    position: fixed; /* relative to viewport */ 
 
    left: 50%; 
 
    top: 50%; 
 
    
 
    /* just aesthetic styling */ 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
    background: rgba(255,255,255,0.3); 
 
}
<a class="centered" href="#">Centered</a>

+0

クール!助けてくれてありがとう。 :) –

関連する問題