Question

我正在尝试创建div作为我的网站菜单。我希望它放到我的父div的中心。我做了很多实验，但都无济于事。以下是我的 CSS代码

.cell {
   color: white;
   font-size: .8rem;
   padding: 1rem;
}

.lt-main-menu { 
    grid-area: main-menu; 
    background: deepskyblue;
    height: 80vh;
}

.lt-menu{
    background: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    vertical-align:middle;
    text-align:center;
    /*
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    */
}

这是我的 html文件

<div class="cell lt-main-menu">
  <div class="lt-menu">
      menu 1
  </div>
  <div class="lt-menu">
      menu 2
  </div>
  <div class="lt-menu">
      menu 3
  </div>
 ...
</div>

我想要的类似于下图。

Answer 1

嗨，我在CodePen应用程序中创建了一支笔。

使用Flex，您可以轻松地垂直和水平居中。

.lt-main-menu {
    ...
    display:flex;
    justify-content: center;
    align-items: center;
}

这是笔https://codepen.io/alessandroinfo/pen/JQPrYm

Answer 2

使用flex属性尝试类似的事情：

<style type="text/css">
    .cell {
        height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lt-menu {
        margin: 10px 0;
    }
</style>

<div class="cell lt-main-menu">
    <div class="cell-wrapper">
        <div class="lt-menu">menu 1</div>
        <div class="lt-menu">menu 2</div>
        <div class="lt-menu">menu 3</div>
    </div>
</div>

Answer 3

尝试使用val scalacOpts = Seq( "-Ywarn-unused:implicits", "-Ywarn-unused:imports", "-Ywarn-unused:locals", "-Ywarn-unused:params", "-Ywarn-unused:patvars", "-Ywarn-unused:privates", "-Ypartial-unification", "-deprecation", "-encoding", "UTF-8", "-feature", "-language:existentials", "-language:higherKinds", "-language:implicitConversions", "-unchecked", "-Xlint", "-Yno-adapted-args", "-Ywarn-dead-code", "-Ywarn-numeric-widen", "-Ywarn-value-discard", "-Xfuture" ) addCompilerPlugin("org.spire-math" %% "kind-projector" % "0.9.9") addCompilerPlugin("com.olegpy" %% "better-monadic-for" % "0.3.0") testFrameworks += new TestFramework("org.scalameter.ScalaMeterFramework") logBuffered := false parallelExecution in Test := false对齐项目。这是示例代码。希望这会有所帮助

HTML

display: flex

CSS

<div class="d-flex flex-row align-items-start m-2">
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
</div>

<div class="d-flex flex-row align-items-center justify-content-center m-2">
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
  <div class="container-block">

  </div>
</div>

JS小提琴链接：https://jsfiddle.net/SJ_KIllshot/dbguqy6w/

Answer 4

这将完成工作。我总是发现flexbox最适合对齐这样的事情。

.cell {
  color: white;
  font-size: .8rem;
  padding: 1rem;
}

.lt-main-menu {
  width: 100%;
  background: deepskyblue;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lt-menu {
  background: black;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  text-align: center;
  display: inline-block;
}

演示：https://jsfiddle.net/trethewey/qs1kvuf5/16/

Answer 5

尝试一下。

.cell {
   position: relative;
   color: white;
   font-size: .8rem;
   padding: 1rem;
}

.box-containers {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.lt-main-menu { 
    grid-area: main-menu; 
    background: deepskyblue;
    height: 80vh;
}

.lt-menu{
    background: black;
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0 auto;
    vertical-align:middle;
    text-align:center;
    /*
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    */
}

<div class="cell lt-main-menu">
  <div class="box-containers">
    <div class="lt-menu">
      menu 1
    </div>
    <div class="lt-menu">
        menu 2
    </div>
    <div class="lt-menu">
        menu 3
    </div>
  </div>
</div>

您还可以使用其他参考文献HERE。

如何将一个div平均居中到另一个div？

5 个答案: