Question

我正在创建一个网站，而且我有这样一个菜单，如下所示：

我希望带有按钮的浅蓝色部分垂直居中，而灰色部分则位于Pepito123下方。

HTML的代码是：

＆＃13;

#fotoUsuario {
  width: 150px;
  height: 150px;
  border-radius: 10px;
}

.contenedor {
  display: flex;
  overflow: hidden;
}

.perfilUsuario {
  background-color: rgb(211, 211, 211);
  width: 80%;
  height: 500px;
  margin: auto;
  border-radius: 10px;
  padding: 15px;
}

.menuPerfil {
  height: 80%;
  width: 20%;
  float: right;
  background-color: rgb(173, 216, 230);
  border-left: 1px solid rgb(0, 0, 0);
}

＆＃13;

<section class="contenedor">
  <div class="perfilUsuario">
    <img id="fotoUsuario" src="http://coyotechronicle.net/wp-content/uploads/2015/02/facebook-logo.jpeg">
    <h1>Pepito123</h1>
    <div>
      <ul class="menuPerfil">
        <li><button type="button">Plan de Estudio</button></li>
        <li><button type="button">Materias</button></li>
        <li><button type="button">Otra cosa</button></li>
      </ul>
    </div>
  </div>
</section>

＆＃13;

JSFiddle

Answer 1

假设你已经有固定的身高我可以建议：

.menuPerfil {
    background-color: rgb(173, 216, 230);
    border-left: 1px solid rgb(0, 0, 0);
}
.perfilUsuario {
    position: relative;
    background-color: rgb(211, 211, 211);
    width: 80%;
    height: 500px;
    margin: auto;
    border-radius: 10px;
    padding: 15px;
}
.perfilUsuario > div {
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -43px;
    margin-left: -55px;
}

DEMO

Answer 2

.perfilUsuario > div{
    position: relative;
    left: 40%;
}

这样做，它会使div居中。下次你应该更好地解释你的问题

Answer 3

我将menuPerfil的类从<ul>元素移到了它的父div，然后将menuPerfil的高度和宽度分别从30％略微修改为40％。

请参阅Fiddle

Answer 4

通常，您可以使用定位和变换将子元素垂直放置在父元素中。参见示例：

.parent {
  width: 100%;
  height: 300px;
  background-color: grey;
  position: relative;
}

.child {
  width: 100px;
  height: 50px;
  background-color: red;
  position: relative;
  top: 50%; /*This will push the child down from the TOP of the parent element. However, origin point of the child is set to its top (imagine top border laying perfectly at the middle vertically), therefore we need the next step, which is: */
  transform: translateY(-50%); /* This will push the element UP for the half of it's height. */
  
  margin: 0 auto; /* If you want to center it horizontally as well. */

<div class="parent">
  <div class="child"></div>
</div>

注意：父母和孩子的位置都很重要。

我给出了通用/通用示例，而不是将其应用于您的特定代码，因为我也（就像其他人一样）不能说我完全理解您究竟想要如何定位您的元素，但希望这会对您有所帮助。另外，我的目标是包含UL的div，而不是UL本身。

如果您需要帮助将此解决方案应用于您的问题，请告诉我们。祝你好运。

在HTML上移动元素/部分

4 个答案: