上<a>标签垂直居中文本在HTML

我有一些按键设置与我的HTML，使他们都是一样的高度，利用这个CSS和HTML上<a>标签垂直居中文本在HTML

ul { 
 
    \t display: table; 
 
    \t padding: 0; 
 
    \t width: 90%; 
 
    \t margin: 5% auto; 
 
    \t list-style-type: none; 
 
    \t vertical-align: middle; 
 
    \t height: 20vh; 
 
    } 
 
    li { 
 
    \t display: block; 
 
    \t float: left; 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t width: 50%; 
 
    \t height: 100%; 
 
    \t margin-top: 15px; 
 
    \t margin-right: 0; 
 
    } 
 
    li.third { 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t margin: auto; 
 
    \t width: 50%; 
 
    } 
 
    .ghost-button { 
 
    \t color: rgb(9, 82, 85); 
 
    \t background: rgba(255, 255, 255, 0.01); 
 
    \t border: 1px solid rgb(9, 82, 85); 
 
    \t padding: 5px 5px; 
 
    \t margin: auto; 
 
    \t display: inline-block; 
 
    \t text-decoration: none; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t vertical-align: middle; 
 
    } 
 
    
 
    .third a { 
 
    \t display: block; 
 
    \t margin-left: 50%; 
 
    \t vertical-align: middle; 
 
    } 
 
    
 
    .ghost-button:hover, .ghost-button:active { 
 
    \t color: #FFF; 
 
    \t background-color: rgb(9, 82, 85); 
 
    \t text-decoration: none; 
 
    } 
 
    
 
    a { 
 
    \t text-decoration: none; 
 
    \t vertical-align: middle; 
 
    \t color: rgb(9, 82, 85); 
 
    }

<ul> 
 
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button" >Check the newspaper classifieds 
 
\t for affordable pieces </a></li> 
 
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button" >Check for garage sales within 
 
\t walking distance </a></li> 
 
<li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button" >Do nothing</a></li> 
 
</ul>

在我页面的按钮不重叠，这是我无法弄清楚的代码片段的问题。该片段还必须全页查看，否则不会发生该问题。对不起，这是我第一次使用代码段。

我想使文本垂直对齐，正如你所看到的，除非我错误地使用它，vertical-align: middle不起作用。在.ghost按钮inline-block的到显示：

来源

2017-04-13 Lordbug

看起来垂直居中我的屏幕上。你使用的是什么浏览器？或者，也许我不明白这个问题。 – floor

您是否点击链接在整个页面中打开代码段？按钮变得更高，文本保持在顶部。 – Lordbug

是的，我看到全屏幕，按钮宽度扩大，但文本仍然看起来居中。我在Firefox中查看。我会复制到一个jsfiddle然后看看。 https://jsfiddle.net/srfp2c52/ – floor

使用flex上的链接，并align-items: center; justify-content: center;水平和垂直居中。

ul { 
 
    display: table; 
 
    padding: 0; 
 
    width: 90%; 
 
    margin: 5% auto; 
 
    list-style-type: none; 
 
    vertical-align: middle; 
 
    height: 20vh; 
 
} 
 

 
li { 
 
    display: block; 
 
    float: left; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    width: 50%; 
 
    height: 100%; 
 
    margin-top: 15px; 
 
    margin-right: 0; 
 
} 
 

 
li.third { 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 50%; 
 
} 
 

 
.ghost-button { 
 
    color: rgb(9, 82, 85); 
 
    background: rgba(255, 255, 255, 0.01); 
 
    border: 1px solid rgb(9, 82, 85); 
 
    padding: 5px 5px; 
 
    margin: auto; 
 
    text-decoration: none; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.third a { 
 
    margin-left: 50%; 
 
} 
 

 
.ghost-button:hover, 
 
.ghost-button:active { 
 
    color: #FFF; 
 
    background-color: rgb(9, 82, 85); 
 
    text-decoration: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: rgb(9, 82, 85); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
}

<ul> 
 
    <li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button">Check the newspaper classifieds 
 
\t for affordable pieces </a></li> 
 
    <li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button">Check for garage sales within 
 
\t walking distance </a></li> 
 
    <li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button">Do nothing</a></li> 
 
</ul>

来源

2017-04-13 22:56:38

可以更改显示直列弯曲，改变垂直对齐：中间到对齐项：中心

align-items是柔性盒的垂直居中。 justify-content将处理水平对齐。

ul { 
 
    \t display: table; 
 
    \t padding: 0; 
 
    \t width: 90%; 
 
    \t margin: 5% auto; 
 
    \t list-style-type: none; 
 
    \t vertical-align: middle; 
 
    \t height: 20vh; 
 
    } 
 
    li { 
 
    \t display: block; 
 
    \t float: left; 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t width: 50%; 
 
    \t height: 100%; 
 
    \t margin-top: 15px; 
 
    \t margin-right: 0; 
 
    } 
 
    li.third { 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t margin: auto; 
 
    \t width: 50%; 
 
    } 
 
    .ghost-button { 
 
    \t color: rgb(9, 82, 85); 
 
    \t background: rgba(255, 255, 255, 0.01); 
 
    \t border: 1px solid rgb(9, 82, 85); 
 
    \t padding: 5px 5px; 
 
    \t margin: auto; 
 
    \t display: inline-flex; 
 
    \t text-decoration: none; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t align-items:center; 
 
    } 
 
    
 
    .third a { 
 
    \t display: block; 
 
    \t margin-left: 50%; 
 
    \t vertical-align: middle; 
 
    } 
 
    
 
    .ghost-button:hover, .ghost-button:active { 
 
    \t color: #FFF; 
 
    \t background-color: rgb(9, 82, 85); 
 
    \t text-decoration: none; 
 
    } 
 
    
 
    a { 
 
    \t text-decoration: none; 
 
    \t vertical-align: middle; 
 
    \t color: rgb(9, 82, 85); 
 
    }

<ul> 
 
<li><a class="ghost-button" href="S1A.php" >Check the newspaper classifieds 
 
\t for affordable pieces </a></li> 
 
<li><a class="ghost-button" href="S1B.php">Check for garage sales within 
 
\t walking distance </a></li> 
 
<li class="third"><a class="ghost-button" href="S1C.php" >Do nothing</a></li> 
 
</ul>

来源

2017-04-13 22:53:18 Derek

您可以使用Flex做到这一点; vertical-align如果应用display:table-cell，则只有财产对我有效。

ul { 
 
    \t display: table; 
 
    \t padding: 0; 
 
    \t width: 90%; 
 
    \t margin: 5% auto; 
 
    \t list-style-type: none; 
 
    \t vertical-align: middle; 
 
    \t height: 20vh; 
 
    } 
 
    li { 
 
    \t display: block; 
 
    \t float: left; 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t width: 50%; 
 
    \t height: 100%; 
 
    \t margin-top: 15px; 
 
    \t margin-right: 0; 
 
    } 
 
    li.third { 
 
    \t vertical-align: middle; 
 
    \t text-align: center; 
 
    \t margin: auto; 
 
    \t width: 50%; 
 
    } 
 
    .ghost-button { 
 
    \t color: rgb(9, 82, 85); 
 
    \t background: rgba(255, 255, 255, 0.01); 
 
    \t border: 1px solid rgb(9, 82, 85); 
 
    \t padding: 5px 5px; 
 
    \t margin: auto; 
 
    \t 
 
    \t text-decoration: none; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t display: flex; 
 
     justify-content: center; 
 
     align-items:center; 
 
    } 
 
    
 
    .third a { 
 
    \t display: flex; 
 
     justify-content: center; 
 
     align-items:center; 
 
    \t margin-left: 50%; 
 
    \t vertical-align: middle; 
 
    } 
 
    
 
    .ghost-button:hover, .ghost-button:active { 
 
    \t color: #FFF; 
 
    \t background-color: rgb(9, 82, 85); 
 
    \t text-decoration: none; 
 
    } 
 
    
 
    a { 
 
    \t text-decoration: none; 
 
    \t vertical-align: middle; 
 
    \t color: rgb(9, 82, 85); 
 
    }

<ul> 
 
<li><a class="ghost-button" class="ghost-button" href="S1A.php" class="ghost-button" >Check the newspaper classifieds 
 
\t for affordable pieces </a></li> 
 
<li><a class="ghost-button" class="ghost-button" href="S1B.php" class="ghost-button" >Check for garage sales within 
 
\t walking distance </a></li> 
 
<li class="third"><a class="ghost-button" class="ghost-button" href="S1C.php" class="ghost-button" >Do nothing</a></li> 
 
</ul>

来源

2017-04-13 22:54:06 Varin

上<a>标签垂直居中文本在HTML

回答

相关问题