我可以让我的文字居中,但使用 px 值。当我尝试使用百分比时,它不起作用。我试过 display:table;和 display:table-cell 还有 display:flex; 证明内容:居中;//水平居中 对齐元素:居中; 但它没有用。
我的父 div 高度:7.7%。
注意:我已经更新了我的完整 header 代码
下面是 JSFIDDLE 链接:
https://jsfiddle.net/Anthony_Chien/f7n77068/#&togetherjs=gR8VEaLgqR
HTML:
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span><a href ="#">DS</a></span>
</div>
<div class="navheadersec2">
<div class="navheadermargin">
<div class="btn-group">
<button class="btn btn-default btn-md dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="headerspanbox"> <div class="headerdivbox"></div> </span>Default <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
</ul>
</div>
<!--<div class="header-icons">
<span class="icons-group"><img src="assets/images/icons/undo.png" /></span>
<span class="icons-label">Undo</span>
</div>-->
<span class="btn-group icons-grp"><img src="assets/images/icons/undo.png" /><br>Undo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/redo.png" /><br>Redo</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-in.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/zoom-out.png" /><br></span>
<span class="btn-group icons-grp"><img src="assets/images/icons/group.png" /><br>Group</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/pattern.png" /><br>Pattern</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/lock.png" /><br>Lock</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/select.png" /><br>Select</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/resize.png" /><br>Scale</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Rotate</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/rotate.png" /><br>Forward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/backward.png" /><br>Backward</span>
<span class="btn-group icons-grp"><img src="assets/images/icons/panel.png" /><br>Panel</span>
</div>
</div>
<div class="navheadersec3">
<div class="navheadermargin">
<div class="headersec3para">
<p class="headerpara">Code</p>
<p class="headerpara">Some text</p>
</div>
<p class="header-price">2,550</p>
<span class="btn-group icons-grp info-icon"><img src="assets/images/icons/info.png" /></span>
<p class="header-price add-to-cart">ADD</p>
</div>
</div>
</nav>
</div>
CSS:
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navheadersec2 {
width: 64.76%;
display: inline-block;
border-right: solid 1px #b8b8b8;
height: 100%;
}
.navheadersec3{
width: 30.214%;
display: inline-block;
margin-left: -4px;
}
.navheadermargin .headersec3para{
width: 30.53%;
height: 100%;
float: left;
margin-left: 6.10%;
}
.headersec3para .headerpara:first-child{
font-size: 12px;
margin: 0px !IMPORTANT;
font-weight: bold;
}
.headersec3para .headerpara{
font-size: 10px;
margin: 0px !IMPORTANT;
}
.header-price{
margin: 0px;
height: 100%;
width: 16.03%;
float: left;
text-align: center;
line-height: 34px;
font-weight: bold;
font-size: 18px;
font-family: SourceSansPro;
}
.info-icon{
margin: auto;
text-align: center;
line-height: 34px;
}
.info-icon > img{
width: 20px;
height: 20px;
}
.add-to-cart{
width: 30.534%;
font-size: 15px;
color: #009cff;
}
.navheadermargin{
margin-top: 10px;
height: 34px;
margin-bottom: 10px;
}
.navheadermargin .btn-group{
margin-left: 1.3%;
height: 100%;
width: 13.510%;
float: left;
}
.navheadermargin .header-icons{
float: left;
width: 24px;
height: 100%;
}
.header-icons .icons-group{
height: 21px;
}
.header-icons .icons-group img{
height: 20px;
width: 20px;
}
.header-icons .icons-label{
height: 15px;
font-family: SourceSansPro;
font-size: 10px;
}
.navheadermargin .btn-group button{
height: 100%;
width: 100%;
}
.headerspanbox{
display: inline-block;
}
.headerspanbox .headerdivbox{
background-color: #1fb6ff;
margin-right: 10px;
height: 14px;
width: 18px;
}
截图图片:
最佳答案
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
width: 5%;
height: 100%;
background-color: #ffffff;
position:relative; /* Add this property */
transform:translate(-50% -50%); /* Add this property */
top:50%; /* Add this property */
left:50%; /* Add this property */
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span><a href ="#">DS....</a></span>
</div>
</nav>
</div>
您可以使用 flex
来实现相同的目的。
更新下面的 fiddle
.vav-main{
width: 100%;
height: 100%;
}
.navheader{
width: 100%;
height: 7.7%;
background-color: #ffffff;
border: solid 1px #b8b8b8;
}
.navlogo {
height: 100%;
width:100%;
background-color: #ffffff;
display:flex;
justify-content:center;
align-items:center;
flex-flow:column nowrap;
}
.navlogo span {
font-family: SourceSansPro;
font-size: 24px;
font-weight: bold;
}
.navlogo span a {
align-self:center;
}
.vav-main> .navbar {
margin-bottom: 0px;
min-height:initial;
}
<div class="vav-main">
<nav class="navbar navbar-default navheader">
<div class="navbar-header navlogo">
<span><a href ="#">DS....</a></span>
</div>
</nav>
</div>
关于html - 如何使用百分比使 DIV 的文本垂直和水平居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44276586/