Css 三个分区内的按钮赢得'；t中心

我想做的是，当屏幕的最大宽度为750px时，我希望侧栏内的按钮使用flexbox垂直和水平居中。以下是我尝试过的：

。侧栏{
高度：计算（100vh-55px）；
宽度：18.5%；
背景色：#F5；
溢出：自动；
}
.侧栏.内容{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
身高：100%；
填充顶部：30px；
框大小：边框框；
}
.侧栏.按钮{
边缘底部：5px；
}
.侧栏.按钮：悬停i{
颜色：淡蓝色；
}
.侧栏.按钮div{
文本对齐：左对齐；
}
.侧栏.按钮形式{
显示器：flex；
}
.侧栏.按钮a{
自对准：居中；
左缘：12%；
保证金权利：5%；
}
.侧栏.按钮a i{
颜色：黑色；
字号：18px；
过渡：0.3s；
}
.侧栏.按钮输入{
边界：无；
字体大小：15px；
背景色：透明；
}
.侧栏.按钮输入：激活{
颜色：黑色；
}
.侧栏.子标题{
左缘：12%；
}
.侧栏.子标题p{
颜色：#6C6D；
字体大小：粗体；
字体大小：14px；
}
@介质（最大宽度：750px）{
.侧栏.内容{
证明内容：中心；
}
.侧栏.按钮输入{
显示：无；
}
.侧栏.子标题{
显示：无；
}
}

工具

新闻

我相信下面的解决方案可以解决您的问题。内容有点偏下，因为

.Content

只有

padding top:30px

，我改为

padding:30px 0

。我还删除了

display:none

规则，因为当时，这个侧边栏中没有任何内容

关键部分 一小条

。侧栏{
高度：计算（100vh-55px）；
宽度：18.5%；
背景色：#F5；
溢出：自动；
}
.侧栏.内容{
显示器：flex；
弯曲方向：立柱；
宽度：100%；
身高：100%；
填充：30px0；
框大小：边框框；
}
.侧栏.按钮{
边缘底部：5px；
}
.侧栏.按钮：悬停i{
颜色：淡蓝色；
}
.侧栏.按钮div{
文本对齐：左对齐；
}
.侧栏.按钮形式{
显示器：flex；
}
.侧栏.按钮a{
自对准：居中；
左缘：12%；
保证金权利：5%；
}
.侧栏.按钮a i{
颜色：黑色；
字号：18px；
过渡：0.3s；
}
.侧栏.按钮输入{
边界：无；
字体大小：15px；
背景色：透明；
}
.侧栏.按钮输入：激活{
颜色：黑色；
}
.侧栏.子标题{
左缘：12%；
}
.侧栏.子标题p{
颜色：#6C6D；
字体大小：粗体；
字体大小：14px；
}
@介质（最大宽度：750px）{
.侧栏.内容{
证明内容：中心；
}
.侧栏.按钮输入
}
.侧栏.子标题{
}
}

工具

新闻

请澄清，这是与您之前（封闭式）问题的重复吗？@halfer这有点类似，但不完全相同。您能否在问题末尾的注释中解释一下，这是如何不同的？我对这一点没有什么看法，但我的经验是，我经常看到一些帖子大声疾呼某些东西不是复制品，而海报就是不明白为什么会是这样。所以，如果你能做出一个有用的声明，解释为什么你认为这是一个新颖的问题，这可能会有助于接近选民。祝你好运@好吧，刚刚更新了我的帖子：）太好了！非常感谢你！怪不得我的眼睛没有对中。我真不敢相信我花了好几个小时才弄明白。非常感谢你！回答得很好！：）边栏上应该有一些很棒的图标，但我不知道发生了什么。再次感谢！：）很高兴听到我能帮忙。字体图标不在此处导入，因此不会显示它们。；）。如果遇到任何问题，请不要犹豫，再次询问。非常感谢！很抱歉，我有一个很快的问题，如果文本没有正确对齐，请处理不同大小的图标。在我的代码中，我在表单周围加了一个div，并使用了text align:left，但没有任何帮助。你知道为什么吗？：）再次非常感谢！：）有关于JSFridle的链接吗？您还可以创建新问题。：）。这里是：）不确定是否创建一个新的问题是最好的主意哈哈。我觉得我已经问了足够一天了哈哈。

.side-bar .content {
  ...
  padding: 30px 0;
  ...
}