如何垂直居中我的内容

时间:2016-10-13 04:53:03

标签: css html5 css3 drop-down-menu vertical-alignment

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

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

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

我感谢我能在这里获得的任何指导,对编码来说太新了,但我正在努力学习:)这样的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>

3 个答案:

答案 0 :(得分:0)

好的,试用和错误是匆匆忙忙的方式:D

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

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

我希望这是你所追求的(尽管仍需要一些调整)。我为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>

答案 2 :(得分:0)

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>