相关疑难解决方法(0)

如何水平和垂直居中元素

我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.

如何为每个标签创建文本对齐x和y?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}
Run Code Online (Sandbox Code Playgroud)
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css css3

363
推荐指数
6
解决办法
30万
查看次数

CSS - 中心将文本与图标对齐

使用CSS的材质图标,我有以下代码,用于呈现带有图标和文本的链接.

<a href="#"><i class="material-icons">group_work</i>Groups</a>
Run Code Online (Sandbox Code Playgroud)

正如你在下面的图片中看到的那样,文本似乎正在下沉......我希望它们在垂直对齐的中心位置.我怎样才能实现这一目标?

图标和文字错误分配

PS.(不是设计师!)

html css icons vertical-alignment google-material-icons

5
推荐指数
1
解决办法
2万
查看次数