Question

我的HTML如下：

  <div id="background_div">
    <img id="background_img" src="images/background.jpg" alt="dont matter">
    <i class="material-icons">perm_identity</i>
    <div id="dropdown">
      <ul id="dropdown2" class="dropdown-content">
        <li><a href="#!">one<span class="badge">1</span></a></li>
        <li><a href="#!">two<span class="new badge">1</span></a></li>
        <li><a href="#!">three</a></li>
      </ul>
      <a class="btn dropdown-button" href="#!" data-activates="dropdown2">Select Service<i class="mdi-navigation-arrow-drop-down right"></i></a>
    </div>
  </div>

我更改了语法，在div id“background_div”（子/父）中设置了div id“dropdown”，因为我认为它可以帮助我集中使用某种相对的CSS函数。我最初有两个div作为兄弟姐妹...基本上，我想要实现的是在background_div的中间获得下拉列表。很高兴以敏感的方式做到这一点。

有人可以提供一些CSS脚本来帮助我实现吗？

谢谢！

Answer 1

此CSS使用Flexbox

#background_div {
  display: flex;
}

#dropdown {
  justify-content: center;
}

Answer 2

您可以将text-align: center;添加到#background_div的css样式中，但#background_div内的所有内容都将居中。如果您只希望将某些部分置于中心位置，请将这些部分包含在<span>标记中，并使用类centered，<span class="centered">。然后在你的CSS中，加入

.centered {
  text-align: center;
}

现在，您可以在想要居中的任何内容周围添加<span class="centered">。

Answer 3

我最喜欢垂直居中的方法是：

/* the div you want centered inside another div*/

#dropdown {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* set the parent div to position relative */

#background_div {
    position: relative;
}

如果您使用文本对齐中心，这可能会弄乱您的水平中心。在这种情况下，将此添加到您的CSS

width: 100px; /* give it any width that fits */)
margin: 0 auto;

所以你的最终代码如下：

#dropdown {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100px;
    margin: 0 auto;
}

#background_div {
    position: relative;
}

如何将div放在div中？

3 个答案: