HTML/CSS按钮文本居中失效求助：求新手友好解决方案

我刚接触HTML和CSS，目前遇到一个问题：两个共用同一类的超链接要作为按钮使用，但按钮内的文本无法在背景中居中。尝试用align-text: center完全无效，网上找的多数解决方案对新手来说太复杂。另外还碰到flex-direction似乎不生效的情况，只能改用display: inline-flex替代display: flex。

我尝试过的两种写法 #

第一种写法 #

HTML代码：

<a class="presentation__content__links" href="linktothewebsite.com"> Yada yada </a>

CSS代码（已修正原代码的选择器多余冒号、text-aling拼写错误）：

.presentation__content__links { 
    display: inline-flex; 
    text-align: center; 
}

第二种写法 #

HTML代码：

<div class="presentation__content__links">
    <a class="presentation__content__links__link" href="linktothewebsite.com"> Yada yada </a>
</div>

CSS代码（已修正错误）：

.presentation__content__links { 
    text-align: center; 
}

.presentation__content__links__link { 
    display: inline-flex; 
    text-align: center; 
 }

新手友好的解决方案 #

核心原理 #

要实现按钮文本的水平+垂直双居中，用Flex布局是最简单的方式，不用依赖text-align（它仅对普通块级元素的文本水平对齐有效，在Flex容器里作用有限）。

正确代码示例 #

HTML（直接用超链接做按钮，结构更简洁）

<a class="presentation__content__links" href="linktothewebsite.com"> Yada yada </a>
<a class="presentation__content__links" href="another-site.com"> 另一个按钮 </a>

CSS（关键样式+基础按钮美化）

.presentation__content__links {
  display: inline-flex; /* 让按钮保持行内特性，可并排显示 */
  justify-content: center; /* 控制文本水平居中 */
  align-items: center; /* 控制文本垂直居中 */
  /* 以下是按钮的基础样式，可根据需求调整 */
  padding: 10px 20px; /* 给按钮加内边距，让文本有足够空间居中 */
  background-color: #2563eb;
  color: white;
  text-decoration: none; /* 去掉超链接默认的下划线 */
  border-radius: 6px; /* 圆角效果，可选 */
  margin: 0 5px; /* 按钮之间的间距，可选 */
}

为什么之前的写法无效？ #

1. 仅设置text-align: center，但没给按钮添加内边距或固定宽高，文本没有足够的空间体现居中效果；
2. Flex布局下，控制子元素（这里是文本）居中的正确属性是justify-content（水平）和align-items（垂直），而非text-align；
3. 原代码中CSS选择器后面多了冒号（比如.presentation__content__links: {），这属于语法错误，会导致整个样式块失效。

关于flex-direction不生效的说明 #

如果使用display: flex，按钮会默认变成块级元素，占满父容器的宽度；而inline-flex是行内块级，按钮宽度会自适应内容。如果要让flex-direction生效，需要确保Flex容器有足够的空间（比如给容器设置固定宽高），或者确认你的嵌套结构没有覆盖这个属性。

内容的提问来源于stack exchange，提问作者macaconheiro