在 HTML 上移动元素/部分答案

【问题标题】：Move element/section on an HTML在 HTML 上移动元素/部分
【发布时间】：2017-10-31 01:46:59
【问题描述】：

我正在做一个网站，我有一个类似这样的菜单：

我希望带有按钮的浅蓝色部分垂直居中，并且在不低于 Pepito123 的灰色部分的右侧。

HTML 的代码是这样的：

#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);
}

<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>

JSFiddle

【问题讨论】：

嗨@Ziklepmna，你能进一步澄清你的问题吗？ “在 Pepito123 下方的灰色部分垂直居中”不够具体，无法理解您希望实现的目标。
浅蓝色部分从Pepito123下面开始，你看到了吗？我希望它从 div 的中心（灰色背景）开始。
那就这样做吧。我在这里看不到问题。还是你自己没试过？

标签： html css positioning elements

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

见Fiddle

【讨论】：

【解决方案3】：

通常，您可以使用定位和变换将子元素垂直定位在父元素内。看例子：

.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 本身。

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

【讨论】：