なぜブートストラップカラムの中に "a"タグを置くことができないのですか？

Question

widthをアブソリュートに設定し、CSSスタイルシートにposition:absolute;を設定すると、3つのブートストラップ列のボタンとして使用する<a href>タグを取得する際に問題が発生します。

私はここで何が欠けているのか誰にでも見られますか？ここに私がこれまで持っているものがあります。

私は現在、何を持っている：

.outer-row { 
 
    width: 100%; 
 
    text-align: center; 
 
    letter-spacing: 1px; 
 
    position: relative; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
} 
 
.dark-bar-option-col { 
 
    padding: 5px; 
 
    position: relative; 
 
    height: 100%; 
 
    align-content: center!important; 
 
    text-align: center!important; 
 
} 
 
.dark-bar-option-col a { 
 
    padding: 15px; 
 
    background-color: #3A83F3; 
 
    color: white; 
 
    bottom: 0; 
 
    font-size: 12px; 
 
    display: block; 
 
    text-align: center; 
 
    position: absolute; 
 
    margin: 20px; 
 
    width: 200px; 
 
} 
 
.dark-bar-option-col a:hover { 
 
    background-color: #0D5C9E; 
 
    text-decoration: none; 
 
} 
 
.dark-bar-option-col:nth-child(2) { 
 
    border-left: solid; 
 
    border-right: solid; 
 
    border-color: #E0DDDD; 
 
    border-width: 3px; 
 
}

<div> 
 
    <div class="row"> 
 
    <div class="col-md-12 outer-row"> 
 
     <div class="col-md-4 dark-bar-option-col"> 
 
     <a href="#">Find out more</a> 
 
     </div> 
 
     <div class="col-md-4 dark-bar-option-col"> 
 
     <a href="#">This is a button</a> 
 
     </div> 
 
     <div class="col-md-4 dark-bar-option-col"> 
 
     <a href="#">This is a button</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなたのアンカー上の絶対位置を持っているので。 ただ、広告左の位置（50％）とあなたのアンカーサイズの設定負の左マージンの半分（-100px）

はこれを行いません：

.dark-bar-option-col a { 
    background-color: #3a83f3; 
    bottom: 0; 
    color: white; 
    display: block; 
    font-size: 12px; 
    margin: 20px 20px 20px -100px; 
    padding: 15px; 
    position: absolute; 
    text-align: center; 
    width: 200px; 
    left: 50%; 
    margin: 20px 20px 20px -100px; 
} 

DEMO

Answer 2

をコンテナに何を持っているので、あなたのアンカーは絶対的なもので、あなたはこのような中心にすることはできません。これにアンカー要素でCSS Transformを使用できます。

.dark-bar-option-col a{ 
padding: 15px; 
background-color: #3A83F3; 
color: white; 
bottom: 0; 
font-size: 12px; 
display: block; 
text-align: center; 
position: absolute; 
margin: 20px; 
width:200px; 
transform: translateX(-50%); 
margin-left: 50%; 
} 

.outer-row{ 
 
width: 100%; 
 
text-align: center; 
 
letter-spacing: 1px; 
 
position: relative; 
 
height: 300px; 
 
margin-top: 20px; 
 
} 
 
.dark-bar-option-col{ 
 
padding: 5px; 
 
position:relative; 
 
height: 100%; 
 
align-content: center!important; 
 
text-align: center!important; 
 
} 
 
.dark-bar-option-col a{ 
 
padding: 15px; 
 
background-color: #3A83F3; 
 
color: white; 
 
bottom: 0; 
 
font-size: 12px; 
 
display: block; 
 
margin: 20px; 
 
width:200px; 
 
/*-- Added --*/ 
 
transform: translateX(-50%); 
 
margin-left: 50%; 
 
} 
 
.dark-bar-option-col a:hover{ 
 
background-color: #0D5C9E; 
 
text-decoration: none; 
 
} 
 
.dark-bar-option-col:nth-child(2){ 
 
border-left: solid; 
 
border-right: solid; 
 
border-color: #E0DDDD; 
 
border-width: 3px; 
 
}

<div> 
 
    <div class="row"> 
 
     <div class="col-md-12 outer-row"> 
 
      <div class="col-md-4 dark-bar-option-col"> 
 
       <a href="#">Find out more</a> 
 
      </div> 
 
      <div class="col-md-4 dark-bar-option-col"> 
 
       <a href="#">This is a button</a> 
 
      </div> 
 
      <div class="col-md-4 dark-bar-option-col"> 
 
       <a href="#">This is a button</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

あなたは、私はあなたの問題はあなたもその行を削除しようとすると、それは絶対的な位置決めをしているということだと思いますthis?

.dark-bar-option-col a{ 
padding: 15px; 
background-color: #3A83F3; 
color: white; 
/* bottom: 0; */ 
font-size: 12px; 
display: block; 
text-align: center; 
position: absolute; 
/* margin: 20px; */ 
width:200px; 

/* added */ 
bottom:0; 
right: 0; 
left: 0; 
margin: auto; 
} 

Answer 4

のようなものを作ろうとしています20pxのマージンを与えず、代わりに "0 auto"を使用してください。これにより、上下左右に0pxの左右が自動的に表示されます。

はこれを試してみてください：彼らはCOL-MD-4にあるとき、すべての

.dark-bar-option-col a{ 
    padding: 15px; 
    background-color: #3A83F3; 
    color: white; 
    bottom: 0; 
    font-size: 12px; 
    display: block; 
    text-align: center; 
    /* position: absolute; */ 
    margin: 0 auto; 
    width:200px; 
} 

Answer 5

まず、あなたは彼らを中心にすることを期待することはできません。第2に、絶対位置を削除します。あなたはそれらを垂直に、水平に、あるいはその両方に整列させる必要がありますか？

CSS: 
.outer-row { 
width: 100%; 
text-align: center; 
letter-spacing: 1px; 
position: relative; 
height: 300px; 
margin-top: 20px; 
} 
.dark-bar-option-col { 
padding: 5px; 
position: relative; 
height: 100%; 
align-content: center!important; 
text-align: center!important; 

} 
.xcent{ position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);} 
.dark-bar-option-col a { 
padding: 15px; 
background-color: #3A83F3; 
color: white; 
bottom: 0; 
font-size: 12px; 
display: block; 
text-align: center; 

margin: 0 auto; 
width: 200px; 
} 
.dark-bar-option-col a:hover { 
background-color: #0D5C9E; 
text-decoration: none; 
} 
.dark-bar-option-col:nth-child(2) { 
border-left: solid; 
border-right: solid; 
border-color: #E0DDDD; 
border-width: 3px; 
} 

HTML: 

<div> 
<div class="row"> 
<div class="col-md-12 outer-row"> 
    <div class="dark-bar-option-col"> 
    <div class="xcent"> 
    <a href="#">Find out more</a> 
    </div> 
    </div> 
    <div class="dark-bar-option-col"> 
    <div class="xcent"> 
    <a href="#">This is a button</a> 
    </div> 
    </div> 
    <div class="dark-bar-option-col"> 
    <div class="xcent"> 
    <a href="#">This is a button</a> 
    </div> 
    </div> 
</div> 
</div> 
</div> 

：あなたが必要な場合は

.outer-row { 
 
    width: 100%; 
 
    text-align: center; 
 
    letter-spacing: 1px; 
 
    position: relative; 
 
    height: 300px; 
 
    margin-top: 20px; 
 
} 
 
.dark-bar-option-col { 
 
    padding: 5px; 
 
    position: relative; 
 
    height: 100%; 
 
    align-content: center!important; 
 
    text-align: center!important; 
 
} 
 
.dark-bar-option-col a { 
 
    padding: 15px; 
 
    background-color: #3A83F3; 
 
    color: white; 
 
    bottom: 0; 
 
    font-size: 12px; 
 
    display: block; 
 
    text-align: center; 
 
    
 
    margin: 0 auto; 
 
    width: 200px; 
 
} 
 
.dark-bar-option-col a:hover { 
 
    background-color: #0D5C9E; 
 
    text-decoration: none; 
 
} 
 
.dark-bar-option-col:nth-child(2) { 
 
    border-left: solid; 
 
    border-right: solid; 
 
    border-color: #E0DDDD; 
 
    border-width: 3px; 
 
}

<div> 
 
    <div class="row"> 
 
    <div class="col-md-12 outer-row"> 
 
     <div class="dark-bar-option-col"> 
 
     <a href="#">Find out more</a> 
 
     </div> 
 
     <div class="dark-bar-option-col"> 
 
     <a href="#">This is a button</a> 
 
     </div> 
 
     <div class="dark-bar-option-col"> 
 
     <a href="#">This is a button</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

は、それらは水平方向と垂直方向の両方でこれを使用する中心