Question

如何在此处垂直集中所有文本内容（主要关注下拉按钮和块）？我尝试了我可以研究并在网上找到的东西，但我无法用它来产生我想要的视觉结果。

我需要将宽度和高度保持为变量，因此我只能使用百分比。

我无法使用固定填充或边距来实现我的需要，尝试过，在调整页面大小时看起来不正确。

我感谢我能在这里获得的任何指导，对编码来说太新了，但我正在努力学习:)这样的noob lol

确实，我希望找到一种很好的方法让它工作，如果适用的话我想复制它以使它水平居中，因为目前我正在使用填充为此目的，但它并不完美。但是，我可以忍受这个，因为无论如何我都会知道最大宽度。

	.div1 {
		Height: 100%;
		Width: 100%;
		background-color: D4D4D2;
		opacity: 0.75
	}
	.div1:hover {
		background-color: red;
		opacity: 0.95
	}

    .dropbtn {
    background-color: transparent;
    color: black;
    padding: 10px 14px;
    font-size: 20px;
    text-align:center;
    border: none;
    cursor: pointer;
    position: relative;
    min-width: 310px;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: relative;
    background-color: transparent;
    min-width: 310px;
    }

    .dropdown-content a {
    color: black;
    position: relative;
    padding: 12px 16px;
    text-decoration: none;
    text-align:center;
    display: block;
    }

    .dropdown-content a:hover {background-color: none}
    .dropdown-content a:hover {color: white}
    .dropdown:hover .dropdown-content {
    display: block;
    }

    .dropdown:hover .dropbtn {
    background-color: transparent;
    color: white;
    }
		</style>

<div class="div1">
<div class="dropdown">
 			 <h2>Hoverable Dropdown</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>

    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1 link very  long</a>
    <a href="#">Link 2 medium</a>
    <a href="#">Link 3</a>
    </div>
				</div>
			</div>
		</div>

Answer 1

好的，试用和错误是匆匆忙忙的方式：D

所以，在发布这个并拒绝放弃之后，尽管我的理解破碎而且支离破碎，而且很少有时间面对我的需求，但通过反复试验，我能够以某种方式得到我想要的东西

这段代码最不完美也不干净，但我希望它能帮助别人。生活和学习：D

＆＃13;

   .div1 {
	 Height: 100%;
	 Width: 100%;
	 background-color: D4D4D2;
	 opacity: 0.75
	 }

   .div1:hover {
	 background-color: red;
	 opacity: 0.95
	}

    .center-block {
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      position: absolute;
      }

    .dropbtn {
    background-color: transparent;
    color: black;
    padding: 2px 14px;
    font-size: 20px;
    text-align:center;
    border: none;
    cursor: pointer;
    position: relative;
    min-width: 310px;
    }

    .dropdown {
    position: relative;
    display: inline-block;
    }

    .dropdown-content {
    display: none;
    position: relative;
    background-color: transparent;
    min-width: 310px;
    }
 
    .dropdown-content a {
    color: black;
    position: relative;
    padding: 2px 16px;
    text-decoration: none;
    text-align:center;
    display: block;
    }

    .dropdown-content a:hover {background-color: none}
    .dropdown-content a:hover {color: white}
    .dropdown:hover .dropdown-content {
    display: block;
    }

    .dropdown:hover .dropbtn {
    background-color: transparent;
    color: white;
    }

＆＃13;

 <div class="div1">
    <div class="center-block">
    <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
    <div class="dropdown-content">
    <a href="#">Link 1 link very  long</a>
    <a href="#">Link 2 medium</a>
    <a href="#">Link 3</a>
    </div>
    </div>
    </div>
    </div>

＆＃13;

Answer 2

我希望这是你所追求的（尽管仍需要一些调整）。我为html＆amp;添加了100％的高度正文标记和垂直居中的内容与类.center-vertical。如果你想垂直居中内容，大多数时候都会使用这个解决方案，所以记住这个很好:)

body,
html {
  height: 100%;
}
.div1 {
  Height: 100%;
  Width: 100%;
  background-color: #D4D4D2;
  opacity: 0.75;
}
.div1:hover {
  background-color: red;
  opacity: 0.95;
}
.dropbtn {
  background-color: transparent;
  color: black;
  padding: 2px 14px;
  font-size: 20px;
  text-align: center;
  border: none;
  cursor: pointer;
  position: relative;
  min-width: 310px;
}
.dropdown {
  display: block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: transparent;
  min-width: 310px;
}
.dropdown-content a {
  color: black;
  position: relative;
  padding: 2px 16px;
  text-decoration: none;
  text-align: center;
  display: block;
}
.dropdown-content a:hover {
  background-color: none
}
.dropdown-content a:hover {
  color: white
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: transparent;
  color: white;
}
.center-vertical {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="div1">
  <div class="dropdown ">
    <h2>Hoverable Dropdown</h2>
    <p>Move the mouse over the button to open the dropdown menu.</p>

    <div class="dropdown center-vertical">
      <button class="dropbtn">Dropdown</button>
      <div class="dropdown-content">
        <a href="#">Link 1 link very  long</a>
        <a href="#">Link 2 medium</a>
        <a href="#">Link 3</a>
      </div>
    </div>
  </div>
</div>

Answer 3

div{
  width: 350px;
  height: 150px;
  background-color: green;
  color: white;
  margin-bottom: 10px;
  display: flex;
}
#div1{
  justify-content: center;
}
#div2{
  align-items: center;
}
#div3{
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

<div id="div1">
  Horizontally centered
</div>
<div id="div2">
  Vertically centered
</div>
<div id="div3">
  Both Horizontally & Vertically centered
</div>

如何垂直居中我的内容

3 个答案: