Question

所以我想垂直居中配置按钮（#config）我尝试了太多选项但是我想要和理解的都没有。所以这是我的CodePen：

http://codepen.io/fenwil/pen/ONRXwz

这是要修改的代码中最重要的部分：

HTML

<header id="cabecera">
    <img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
    <h3 id="user">Username</h3>
    <a href="perfil.html"><img alt="Configuracion" src="http://imgh.us/config.svg" id="config"></a>
</header>

CSS

#config {
    transition: all 0.5s ease;
    height: 20px;
    width: 20px;
}

提前致谢！如果你看到别的东西，请让我知道！

Answer 1

如果你用这个添加新行？

#config{
  margin-top: 15px;
}

Answer 2

移除浮动并使用display:inline-block和vertical-align:middle。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,
html {
  font-family: 'Roboto', sans-serif;
  height: 100%;
  overflow-y: hidden;
}
a {
  text-decoration: none;
}
#cabecera {
  text-align: right;
  margin-top:50px; /* for demo only */
}
#cabecera,
a {
  color: #FFFFFF;
}
#cabecera {
  background-color: #393E46;
  line-height: 50px;
  height: 50px;
}
#cabecera * {
  margin: 0px 4px 0px 4px;
}
#user,
#config {
  display: inline-block;
  vertical-align: middle;
}
#logo {
  height: 50px;
  width: 55px;
  float: left;
}
#config {
  transition: all 0.5s ease;
  height: 20px;
  width: 20px;
}
#config:hover {
  transform: rotate(90deg);
}
#user {
  font-weight: 100;
  font-size: 18px;
}

＆＃13;

<header id="cabecera">
  <img id="logo" alt="Mayor Igual a Siete" src="http://imgh.us/logo_207.svg">
  <h3 id="user">Username</h3>
  <a href="perfil.html">
    <img alt="Configuracion" src="http://imgh.us/config.svg" id="config">
  </a>
</header>

＆＃13;

Answer 3

以中心为中心：

.wrapper
{
    position: relative;
}

.content
{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

删除不需要的路线

工作原理：上/左百分比定位工作在父级的大小上，导致内部元素的左上角移动到父元素的中心。要真正使元素居中，那么你需要{-1}}元素{-1}，它会按照元素本身的大小进行滑动，从而产生一个完美的中心

垂直中心到标签内的img（svg）

3 个答案: